This time I will show you how to optimize the js async function and what are the precautions for optimizing the js async function. The following is a practical case, let's take a look.
First of all, you need to understand Promise
Promise is the basis for using async/await, so you must first understand what Promise does Promise is a good thing to help solve callback hell and make asynchronous processes clearer. A simple example of converting Error-first-callback to Promise:
const fs = require('fs')
function readFile (fileName) {
return new Promise((resolve, reject) => {
fs.readFile(fileName, (err, data) => {
if (err) reject(err)
resolve(data)
})
})
}
readFile('test.log').then(data => {
console.log('get data')
}, err => {
console.error(err)
})The relationship between async and Promise
The async function is equivalent to a shorthand function that returns a Promise instance. The effect is as follows:function getNumber () {
return new Promise((resolve, reject) => {
resolve(1)
})
}
// =>
async function getNumber () {
return 1
}getNumber().then(data => {
// got data
})
// =>
let data = await getNumber()async function getNumber () {
console.log('call getNumber()')
return 1
}
getNumber().then(_ => console.log('resolved'))
console.log('done')
// 输出顺序：
// call getNumber()
// done
// resolvedThe Promise inside the Promise will be digested
That is to say , if we have the following code:function getNumber () {
return new Promise(resolve => {
resolve(Promise.resolve(1))
})
}
getNumber().then(data => console.log(data)) // 1 But in fact, we will get the return value directly: 1. That is to say, if a Promise is returned in Promise, the program will actually help us execute this Promise and trigger then when the internal Promise state changes. callback.
An interesting thing:
function getNumber () {
return new Promise(resolve => {
resolve(Promise.reject(new Error('Test')))
})
}
getNumber().catch(err => console.error(err)) // Error: TestThis method is often used to throw exceptions in async functions
How to throw exceptions in async functions: async function getNumber () {
return Promise.reject(new Error('Test'))
}
try {
let number = await getNumber()
} catch (e) {
console.error(e)
}Copy after login
Be sure not to forget the await key WordsIf you forget to add the await keyword, no error will be reported at the code level, but the return value we receive is a Promise
let number = getNumber() console.log(number) // Promise
, so be sure to use it when using it. Remember that await keyword
let number = await getNumber() console.log(number) // 1
Not all places need to add await
During the execution of the code, sometimes, not all asynchronous operations need to add await. For example, the following operation on files:
We assume that all APIs of fs have been converted to Promise versions by us
let number = await getNumber() console.log(number) // 1
We open a file through await, and then write the file twice.
But note that we did not add the await keyword before the two file writing operations.
Because this is redundant, we only need to notify the API that I want to write a line of text into this file. The order will naturally be controlled by fs Then we use await to close the file at the end.
Because if we have not completed the writing process above, the close callback will not be triggered.
In other words, the triggering of the callback means that the above two steps of write have been completed.
Merge multiple unrelated async function callsIf we now want to get a user's avatar and user details (and this They are two interfaces, although they rarely appear under normal circumstances)
async function getUser () {
let avatar = await getAvatar()
let userInfo = await getUserInfo()
return {
avatar,
userInfo
}
}这样的代码就造成了一个问题，我们获取用户信息的接口并不依赖于头像接口的返回值。
但是这样的代码却会在获取到头像以后才会去发送获取用户信息的请求。
所以我们对这种代码可以这样处理：
async function getUser () {
let [avatar, userInfo] = await Promise.all([getAvatar(), getUserInfo()])
return {
avatar,
userInfo
}
}这样的修改就会让getAvatar与getUserInfo内部的代码同时执行，同时发送两个请求，在外层通过包一层Promise.all来确保两者都返回结果。
让相互没有依赖关系的异步函数同时执行
一些循环中的注意事项
forEach
当我们调用这样的代码时：
async function getUsersInfo () {
[1, 2, 3].forEach(async uid => {
console.log(await getUserInfo(uid))
})
}
function getuserInfo (uid) {
return new Promise(resolve => {
setTimeout(_ => resolve(uid), 1000)
})
}
await getUsersInfo()这样的执行好像并没有什么问题，我们也会得到1、2、3三条log的输出，但是当我们在await getUsersInfo()下边再添加一条console.log('done')的话，就会发现：
我们会先得到done，然后才是三条uid的log，也就是说，getUsersInfo返回结果时，其实内部Promise并没有执行完。
这是因为forEach并不会关心回调函数的返回值是什么，它只是运行回调。
不要在普通的for、while循环中使用await
使用普通的for、while循环会导致程序变为串行：
for (let uid of [1, 2, 3]) {
let result = await getUserInfo(uid)
}这样的代码运行，会在拿到uid: 1的数据后才会去请求uid: 2的数据
--------------------------------------------------------------------------------
关于这两种问题的解决方案：
目前最优的就是将其替换为map结合着Promise.all来实现：
await Promise.all([1, 2, 3].map(async uid => await getUserInfo(uid)))
这样的代码实现会同时实例化三个Promise，并请求getUserInfo
P.S. 草案中有一个await*，可以省去Promise.all
await Promise.all([1, 2, 3].map(async uid => await getUserInfo(uid)))
P.S. 为什么在使用Generator+co时没有这个问题
在使用koa1.x的时候，我们直接写yield [].map是不会出现上述所说的串行问题的看过co源码的小伙伴应该都明白，里边有这么两个函数（删除了其余不相关的代码）：
function toPromise(obj) {
if (Array.isArray(obj)) return arrayToPromise.call(this, obj);
return obj;
}
function arrayToPromise(obj) {
return Promise.all(obj.map(toPromise, this));
}co是帮助我们添加了Promise.all的处理的（膜拜TJ大佬）。
总结
总结一下关于async函数编写的几个小提示：
1.使用return Promise.reject()在async函数中抛出异常
2.让相互之间没有依赖关系的异步函数同时执行
3.不要在循环的回调中/for、while循环中使用await，用map来代替它
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
The above is the detailed content of How to optimize js async function. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
