Somtime 'async await' can have a bad effect on code proferemence. Let's take a look the below example:node
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:git
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.github
So if one api request cost 0.5s then two in sequence will cose 1s. json
The way to solve the problem is by converting operations to concurrently:api
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:promise
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. app