Fetch API & Async Await
Fetch API & Async Await
const fetchJSON = (url = ``) => {
return fetch(url,
{
method: "GET",
// mode: "no-cors",
mode: "cors",
credentials: "same-origin",
headers: {
"Content-Type": "application/json; charset=utf-8",
},
})
.then(res => res.json())
.then(
(json) => {
return json;
}
)
.catch(err => console.log(`fetch error`, err));
};
// async / await
async function getDatas(url = ``) {
try {
return await fetchJSON(url);
} catch (err) {
console.error("getDatas error:\n", err);
}
}
// demo
const promiseData = getDatas(`https://cdn.xgqfrms.xyz/json/ssr/posts.json`);
promiseData.then(data => console.log(`promiseData`, data));

SSR
"use strict";
/**
*
* @author xgqfrms
* @license MIT
* @copyright xgqfrms
* @created 2020-02-23
* @modified
*
* @description
* @augments
* @example
* @link
*
*/
const log = console.log;
const puppeteer = require('puppeteer');
const handlebars = require('handlebars');
const fetch = require('node-fetch');
const fs = require('fs');
const path = require('path');
const util = require('util');
const readFile = util.promisify(fs.readFile);
class Poster {
constructor(dom) {
this.dom = dom;
}
async fetchData(url) {
const data = await fetch(url).then(res => res.json());
// const data = await fetch(url).then(res => res.json()).catch(err => log(`fetch error`, err));
return data;
}
async html() {
try {
const data = {
timestamp: new Date().getTime(),
};
const templatePath = path.resolve('path', 'to', './poster-template.html');
const content = await readFile(templatePath, 'utf8');
// compile and render the template with handlebars
const template = handlebars.compile(content);
log(`template \n`, template);
return template(data);
} catch (error) {
throw new Error('Cannot create Poster HTML template.', error)
}
}
async screenshot() {
const html = await this.html();
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.setContent(html);
// await page.goto(url);
const screenshot = await page.screenshot({
path: 'poster-template-ssr.png',
fullPage: true,
});
await browser.close();
return screenshot;
}
}
Fetch API & Async Await的更多相关文章
- ES next & Async Await
ES next & Async Await https://jestjs.io/docs/en/asynchronous#async-await ES7 new async () => ...
- webpack & async await
webpack & async await ES 7 // async function f() { // return 1; // } const f = async () => { ...
- 了解 Fetch API与Fetch+Async/await
背景 提及前端与服务器端的异步通信,离不开 Ajax (Asynchronous JavaScript and XML).实际上我们常说的 Ajax 并非指某一项具体的技术,它主要是基于用脚本操作 H ...
- 已配置好的vue全家桶项目router,vuex,api,axios,vue-ls,async/await,less下载即使用
github 地址: https://github.com/liangfengbo/vue-cli-project 点击进入 vue-cli-project 已构建配置好的vuejs全家桶项目,统一管 ...
- fetch + async await 使用原生JS发送网络请求
由于现在主流浏览器支持Fetch API,无需引用其他库就能实现AJAX,一行代码就搞定,可以说是非常方便了. export default { name: 'HelloWorld', data() ...
- ES7前端异步玩法:async/await理解 js原生API妙用(一)
ES7前端异步玩法:async/await理解 在最新的ES7(ES2017)中提出的前端异步特性:async.await. 什么是async.await? async顾名思义是“异步”的意思,a ...
- Vue实例中封装api接口的思路 在页面中用async,await调用方法请求
一般我们写小型的项目是用不到封装axios实例 但是当我们写大型项目时 接口有时候多到有上百个接口,那我们在请求一次调用一次接口,接口上好多都是重复的,这个时候我们就可以封装axios实例,既节省了 ...
- Python PEP 492 中文翻译——协程与async/await语法
原文标题:PEP 0492 -- Coroutines with async and await syntax 原文链接:https://www.python.org/dev/peps/pep-049 ...
- Ajax新玩法fetch API
目前 Web 异步应用都是基于 XMLHttpRequest/ActiveXObject (IE)实现的, 这些对象不是专门为资源获取而设计的,因而它们的 API 非常复杂,同时还需要开发者处理兼容性 ...
随机推荐
- PyQt:自定义QLineEdit禁止选中复制粘贴
说明 自定义的QLineEdit,当输入文本之后,禁止选中复制粘贴等操作 实现方法 MyQLineEdit类继承了QLineEdit类,并重写QLineEdit类中的mouseMoveEvent方法和 ...
- Windows系统pip安装whl包
1.确保PIP的存在 2.CMD命令进入C:\Python34\Scripts里面后再执行PIP命令安装pip install wheel # D: 和cd 地址 3.把文件最好放在\S ...
- 图像检索(5):基于OpenCV实现小型的图像数据库检索
本文对前面的几篇文章进行个总结,实现一个小型的图像检索应用. 一个小型的图像检索应用可以分为两部分: train,构建图像集的特征数据库. retrieval,检索,给定图像,从图像库中返回最类似的图 ...
- C#语法——消息,MVVM的核心技术。
在C#中消息有两个指向,一个指向Message,一个指向INotify.这里主要讲INotify. INotify也有人称之为[通知],不管叫消息还是通知,都是一个意思,就是传递信息. 消息的定义 I ...
- Docker进阶之九:Dockerfile 及 通过Dockerfile搭建lnmp
一.Dockerfile指令 指令 描述 指令 描述 FROM 构建的新镜像是基于哪个镜像 例如:FROM centos:6 COPY 拷贝文件或目录到镜像,用法同上例如:COPY ./start.s ...
- Prism定制Region控件
并不是所有控件都可以被用作Region了吗?我们将Gird块的代码变成这样: <Grid> <ContentControl prism:RegionManager.RegionNam ...
- JAVA WEB快速入门之环境搭建
前言 我是一直致力于:.NET技术栈.WEB前端.架构设计相关的开发与管理工作,但因国内大环境影响及公司技术方向发生转变(由.NET全部转为JAVA),需要熟练掌握JAVA WEB相关的知识,故我也得 ...
- java基础(五):谈谈java中的多线程
1.多线程 1.1.多线程介绍 学习多线程之前,我们先要了解几个关于多线程有关的概念. 进程:正在运行的程序.确切的来说,当一个程序进入内存运行,即变成一个进程,进程是处于运行过程中的程序,并且具有一 ...
- HttpServletRequest内容处理工具类
目录 HttpServletRequestUtil类 (可转换成json数据,xml数据,map数据) HttpServletRequestUtil类 import javax.servlet.htt ...
- Huffman Tree 简单构造
//函数:构造Huffman树HT[2*n-1] #define MAXVALUE 9999//假设权值不超过9999 #define MAXLEAF 30 #define MAXNODE MAXLE ...