Home > Article > Web Front-end > How to optimize js async function
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)
}) We call the function to return a Promise instance, and read the file during the instantiation process. When the file The read callback is triggered to change the Promise state. We use then to monitor changes in the resolved or rejected state. The first callback is for resolve processing, and the second callback is for reject processing.
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
}Both are used in exactly the same way. You can use then to monitor the return value after calling the getNumber function. And how to use the await syntax corresponding to async: The execution of
getNumber().then(data => {
// got data
})
// =>
let data = await getNumber()await will get the Promise execution result behind the Async function code execution is synchronous, and the result is returned It is asynchronous. The async function always returns a Promise instance. This is very important. So when calling an async function, it can be understood that the code inside is in new Promise, so it is executed synchronously. The final return operation is equivalent to calling resolve in the Promise:
async function getNumber () {
console.log('call getNumber()')
return 1
}
getNumber().then(_ => console.log('resolved'))
console.log('done')
// 输出顺序：
// call getNumber()
// done
// resolved
The 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)) // 1If we follow what is said above, the data we get in then should be the value passed into resolve, which is another Promise instance. 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: TestIf we pass in a reject in resolve, we can directly use catch to monitor it externally. This 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)
}
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!