[ES7] Await multi promises sequentially or concurrently
Somtime 'async await' can have a bad effect on code proferemence. Let's take a look the below example:
const fetch = require('node-fetch');
const BASE_URL = 'https://api.github.com/users';
class GithubUser {
async fetchGitHubUser(handle) {
const response = await fetch(`${BASE_URL}/${handle}`);
const body = await response.json();
if (response.status !== 200) {
throw Error(body.message);
}
return body;
}
async fetchGitHubRepos(handle) {
const response = await fetch(`${BASE_URL}/${handle}/repos`);
const body = await response.json();
if (response.status !== 200) {
throw Error(body.message);
}
return body;
}
}
(async () => {
const github = new GithubUser();
try {
const user = await github.fetchGitHubUser('zhentian-wan');
const repos = await github.fetchGitHubRepos('zhentian-wan');
console.log(user);
console.log(repos);
} catch(err) {
console.error(err);
}
})();
In the example, we are doing two await operations sequentially:
const user = await github.fetchGitHubUser('zhentian-wan');
const repos = await github.fetchGitHubRepos('zhentian-wan');
Remember that 'await' will pause the JS execution until promise resolve or reject.
So if one api request cost 0.5s then two in sequence will cose 1s.
The way to solve the problem is by converting operations to concurrently:
const userPromise = github.fetchGitHubUser('zhentian-wan');
const reposPromise = github.fetchGitHubRepos('zhentian-wan');
const user = await userPromise;
const repos = await reposPromise;
console.log(user.name);
console.log(repos.length);
Or we can use Promise.all:
const [user, repos] = await Promise.all([
github.fetchGitHubUser('zhentian-wan'),
github.fetchGitHubRepos('zhentian-wan')
]); console.log(user.name, repos.length);
Of course, tow approaches are not the same, Promise.all will throw error if one of the request throw error.
[ES7] Await multi promises sequentially or concurrently的更多相关文章
- 【转】6 Reasons Why JavaScript’s Async/Await Blows Promises Away (Tutorial)
原文:https://hackernoon.com/6-reasons-why-javascripts-async-await-blows-promises-away-tutorial-c7ec105 ...
- es7 await/async解决异步问题
最近做项目遇到一个问题,前端调用ie浏览器中的ocx的方法去查询数据,查询完之后ocx给一个返回值,然后js将返回值当参数传入到另外的函数中去做数据处理,但是遇到一个问题是前端需要异步去执行这个过程 ...
- promise async await使用
1.Promise (名字含义:promise为承诺,表示其他手段无法改变) Promise 对象代表一个异步操作,其不受外界影响,有三种状态: Pending(进行中.未完成的) Resolved( ...
- 图解 Await 和 Async
原文链接:Await and Async Explained with Diagrams and Examples 文章目录 简介 Promise 问题:组合 Promise Async 函数 Awa ...
- Async/Await替代Promise的6个理由
译者按: Node.js的异步编程方式有效提高了应用性能:然而回调地狱却让人望而生畏,Promise让我们告别回调函数,写出更优雅的异步代码:在实践过程中,却发现Promise并不完美:技术进步是无止 ...
- 如何避免 await/async 地狱
原文地址:How to escape async/await hell 译文出自:夜色镇歌的个人博客 async/await 把我们从回调地狱中解救了出来,但是如果滥用就会掉进 async/await ...
- 一次forEach 中 await 的使用
forEach 和 await/async 的问题 最近在刷面试提的时候看见这样一道题 const list = [1, 2, 3] const square = num => { return ...
- jdk8中java.util.concurrent包分析
并发框架分类 1. Executor相关类 Interfaces. Executor is a simple standardized interface for defining custom th ...
- ECMAScript 6 Features 中文版
ECMAScript 6 Features 中文版 如词不达意,欢迎提 PR & issue 采用中英混排的方式进行译制,如不解请查看对应原文 本文档将与原作者的 文档 保持同步更新,欢迎关注 ...
随机推荐
- 使用Cygwin在Windows上体验Linux的快感
前言 记得大学的时候就以前使用过Cygwin,可惜当时没有发现她的美,我相信如今大多数朋友可能会更加倾向于使用Git或者干脆直接使用虚拟机以及原生Unix. 只是对于刚进入Linux的世界新人来说,使 ...
- jQuery post 传递 iframe
//使用POST链接iframe function doOpenPostIfrm(url, args, iframe) { //创建一个隐藏表单 var _form = $("<for ...
- ELK之日志查询、收集与分析系统
项目由来 (1)开发人员不能登录线上服务器查看详细日志,经过运维周转费时费力 (2)日志数据分散在多个系统,难以查找与整合 (3)日志数据量巨大,查询速度太慢,无法满足需求 (4)无法全局掌控项目运行 ...
- javafx image button
public class EffectTest extends Application { public static void main(String[] args) { launch(args); ...
- Code froces 831 A. Unimodal Array
A. Unimodal Array time limit per test 1 second memory limit per test 256 megabytes input standard in ...
- 洛谷 P3669 [USACO17OPEN]Paired Up 牛牛配对
P3669 [USACO17OPEN]Paired Up 牛牛配对 题目描述 Farmer John finds that his cows are each easier to milk when ...
- ASP.NET MVC案例教程(基于ASP.NET MVC beta)——第四篇:传递表单数据
摘要 本文将完成我们“MVC公告发布系统”的公告发布功能,以此展示在ASP.NET MVC中如何传递处理表单的数据. 前言 通过前几篇文章,我们已经能比较自如的使用ASP.NET ...
- 【CS Round #46 (Div. 1.5) C】Set Subtraction
[链接]h在这里写链接 [题意] 一开始有n个数字,然后有一个数字X,把每个数字都减去X,又生成N个新的数字. 然后把这2*N个数字混在一起. 告诉你这2*N个数字是什么.让你复原出原来的N个数字,以 ...
- [Angular] Implement a custom form component by using control value accessor
We have a form component: <label> <h3>Type</h3> <workout-type formControlName=& ...
- 三期_day03_环境搭建和客户页面_I
以下交代一下使用的框架 前端: EasyUI+Jquery+Ajax 后台: Spring+Structs2+mybatis 数据库: Oracle 使用工具: MyEclipse12+Maven 操 ...