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 非常复杂,同时还需要开发者处理兼容性 ...
随机推荐
- 深入浅出mongoose
深入浅出mongoose mongoose是nodeJS提供连接 mongodb的一个库. 此外还有mongoskin, mongodb(mongodb官方出品). 本人,还是比较青睐mongoose ...
- 制造业物料清单BOM、智能文档阅读、科学文献影响因子、"Celebrated Italian mathematician ZepartzatT Gozinto" 与 高津托图
意大利数学家Z.高津托 意大利伟大数学家Sire Zepartzatt Gozinto的生卒年代是一个谜[1],但是他发明的 “高筋图” 在 制造资源管理.物料清单(BOM)管理.智能阅读.科学文献影 ...
- 🕵️ 如何绕过 BKY 对 script 的屏蔽
Conmajia January 20, 2019 警告 这是试验,警告个屁,请不要多多尝试用它做多余的事. 果不其然,这篇文章立刻被移出主页了,我就说嘛,BKY 哪儿会那么包容和坦然呢? 原文 do ...
- AspNetCore 多环境配置 以及注册 消费Consul
本文主要记录 CoreApi 的多环境配置以及如何消费在consul中注册的Api 服务 1.创建三个CoreApi 我们在项目中创建三个站点分别为 UserServices “用户服务”,Order ...
- .NET开发中基础问题,CODE First AND DB First(大牛自动忽略,小白可以看一下)
最近在做一个新项目开发时,碰到了下面这个问题.在使用EF时,提示错误信息 To continue using Database First or Model First ensure that the ...
- Oracle数据库的安装 【超详细的文图详解】
Oracle简介Oracle Database,又名Oracle RDBMS,或简称Oracle.是甲骨文公司的一款关系数据库管理系统.它是在数据库领域一直处于领先地位的产品.可以说Oracle数据库 ...
- 关于视频断点续播和H5的本地存储
前段时间,需要在下实现一个视频的断点续播功能,呃,我不会呀,这就很尴尬了.然后呢,在下就想起了一个叫做localStorage的东西.这是个什么东西呢?在网上查阅了一些资料后,在下发现这是webSto ...
- 使用vue-cli快速搭建vue项目
直接上干货...... 步骤: 1.安装node.js:(下载地址:https://nodejs.org/en/download/)安装完成以后,在命令窗口输入node -v 查看node版本. ...
- ArcGIS API for JavaScript 与 npm 之例子运行
下载官方的demo,4.7的,在终端里跑了一下,测试成功(未打包) 在测试中精简掉了不需要的文件,使用http协议跑的(file协议不行哦) 最简单的目录如下: 我把以上文件放到一个叫demo的文件夹 ...
- (三) Keras Mnist分类程序以及改用交叉熵对比
视频学习来源 https://www.bilibili.com/video/av40787141?from=search&seid=17003307842787199553 笔记 Mnist分 ...