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的更多相关文章

  1. ES next & Async Await

    ES next & Async Await https://jestjs.io/docs/en/asynchronous#async-await ES7 new async () => ...

  2. webpack & async await

    webpack & async await ES 7 // async function f() { // return 1; // } const f = async () => { ...

  3. 了解 Fetch API与Fetch+Async/await

    背景 提及前端与服务器端的异步通信,离不开 Ajax (Asynchronous JavaScript and XML).实际上我们常说的 Ajax 并非指某一项具体的技术,它主要是基于用脚本操作 H ...

  4. 已配置好的vue全家桶项目router,vuex,api,axios,vue-ls,async/await,less下载即使用

    github 地址: https://github.com/liangfengbo/vue-cli-project 点击进入 vue-cli-project 已构建配置好的vuejs全家桶项目,统一管 ...

  5. fetch + async await 使用原生JS发送网络请求

    由于现在主流浏览器支持Fetch API,无需引用其他库就能实现AJAX,一行代码就搞定,可以说是非常方便了. export default { name: 'HelloWorld', data() ...

  6. ES7前端异步玩法:async/await理解 js原生API妙用(一)

    ES7前端异步玩法:async/await理解   在最新的ES7(ES2017)中提出的前端异步特性:async.await. 什么是async.await? async顾名思义是“异步”的意思,a ...

  7. Vue实例中封装api接口的思路 在页面中用async,await调用方法请求

    一般我们写小型的项目是用不到封装axios实例 但是当我们写大型项目时  接口有时候多到有上百个接口,那我们在请求一次调用一次接口,接口上好多都是重复的,这个时候我们就可以封装axios实例,既节省了 ...

  8. Python PEP 492 中文翻译——协程与async/await语法

    原文标题:PEP 0492 -- Coroutines with async and await syntax 原文链接:https://www.python.org/dev/peps/pep-049 ...

  9. Ajax新玩法fetch API

    目前 Web 异步应用都是基于 XMLHttpRequest/ActiveXObject (IE)实现的, 这些对象不是专门为资源获取而设计的,因而它们的 API 非常复杂,同时还需要开发者处理兼容性 ...

随机推荐

  1. springboot~@Query到DTO对象

    我们有时在进行开发过程中,使用jpa的@Query注解去选择多张表然后返回一个DTO对象,这个时候我们需要特殊处理一下,因为默认情况下,你的jpa代码是不认DTO对象的. 参考文章:https://s ...

  2. java~gradle构建公用包并上传到仓库~使用私有仓库的包

    在新的项目里使用仓库的包 上一讲中我们说了java~gradle构建公用包并上传到仓库,如何发布公用的非自启动类的包到私有仓库,而这一讲我们将学习如何使用这些包,就像我们使用spring框架里的功能包 ...

  3. 【Python3爬虫】自动查询天气并实现语音播报

    一.写在前面 之前写过一篇用Python发送天气预报邮件的博客,但是因为要手动输入城市名称,还要打开邮箱才能知道天气情况,这也太麻烦了.于是乎,有了这一篇博客,这次我要做的就是用Python获取本机I ...

  4. .NET Core中的一个接口多种实现的依赖注入与动态选择看这篇就够了

    最近有个需求就是一个抽象仓储层接口方法需要SqlServer以及Oracle两种实现方式,为了灵活我在依赖注入的时候把这两种实现都给注入进了依赖注入容器中,但是在服务调用的时候总是获取到最后注入的那个 ...

  5. 今天筹备了一件大事:重学JS

    最近在阮大神的博客上看到一篇文章,讲的是关于如何自学计算机技术,原文出自 Teach Yourself Computer Science.看完以后我明白自己的缺陷在哪里,基础不够牢固是我最大的问题. ...

  6. Redis哨兵机制

    Redis Sentinel物理结构图 角色 IP Port 别名 master 127.0.01 6379 主节点 slave-1 127.0.01 6380 slave-1节点 slave-2 1 ...

  7. Linux文本三剑客超详细教程---grep、sed、awk

    awk.grep.sed是linux操作文本的三大利器,合称文本三剑客,也是必须掌握的linux命令之一.三者的功能都是处理文本,但侧重点各不相同,其中属awk功能最强大,但也最复杂.grep更适合单 ...

  8. 网站集群架构(LVS负载均衡、Nginx代理缓存、Nginx动静分离、Rsync+Inotify全网备份、Zabbix自动注册全网监控)--技术流ken

    前言 最近做了一个不大不小的项目,现就删繁就简单独拿出来web集群这一块写一篇博客.数据库集群请参考<MySQL集群架构篇:MHA+MySQL-PROXY+LVS实现MySQL集群架构高可用/高 ...

  9. Notepad++替换SQL Server Select窗口列名的中括号的小技巧

    条件:“查找模式”那选中“扩展” 一.简单替换 查找目标(包括空格,各个SSMS版本可能不同): ]\r\n ,[ 替换为:, 二.替换为@ 查找目标(包括空格,各个SSMS版本可能不同): ]\r\ ...

  10. 关于PHP打开之后找不到数据库问题的记录

    昨天发现了一个奇怪的问题,一直正常使用的某个网站打不开了,这个网站是PHP写的,数据库用的my sql.打开之后就提示密码错误,无法正常打开页面. 由于平时基本上没用过my sql,按照使用sql s ...