Detailed explanation of steps to write js async function-JS Tutorial-php.cn

This time I will bring you a detailed explanation of the steps for writing js async functions. What are the precautions for writing js async functions? The following is a practical case, let's take a look.

2018 has arrived in May, and the 4.x version of node has also stopped maintaining. A certain service of our company has also been switched to 8.x. We are currently migrating the previous generator to koa2.x. Replace all with async. However, during the replacement process, we found some waste of time caused by the abuse of async, so let's talk about how to optimize the async code and make full use of the asynchronous event stream to eliminate the abuse of async

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 one that helps solve callback hell Good stuff, makes 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)
})

Copy after login

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
}

Copy after login

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()

Copy after login

await will get the Promise execution result behind the expression, which is equivalent to us calling then to get the callback result. P.S. When async/await support was not very high, everyone would choose to use generator/yield combined with some libraries similar to co to achieve similar effects

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

Copy after login

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)) // 1

Copy after login

If 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: Test

Copy after login

If 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)
}

Copy after login

Be sure not to forget the await key Words

If 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

Copy after login

, so be sure to use it when using it. Remember that await keyword

let number = await getNumber()
console.log(number) // 1

Copy after login

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

Copy after login

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.

合并多个不相干的async函数调用

如果我们现在要获取一个用户的头像和用户的详细信息（而这是两个接口虽说一般情况下不太会出现）

async function getUser () {
 let avatar = await getAvatar()
 let userInfo = await getUserInfo()
 return {
  avatar,
  userInfo
 }
}

Copy after login

这样的代码就造成了一个问题，我们获取用户信息的接口并不依赖于头像接口的返回值。
但是这样的代码却会在获取到头像以后才会去发送获取用户信息的请求。
所以我们对这种代码可以这样处理：

async function getUser () {
 let [avatar, userInfo] = await Promise.all([getAvatar(), getUserInfo()])
 return {
  avatar,
  userInfo
 }
}

Copy after login

这样的修改就会让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()

Copy after login

这样的执行好像并没有什么问题，我们也会得到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)
}

Copy after login

这样的代码运行，会在拿到uid: 1的数据后才会去请求uid: 2的数据

--------------------------------------------------------------------------------

关于这两种问题的解决方案：

目前最优的就是将其替换为map结合着Promise.all来实现：

await Promise.all([1, 2, 3].map(async uid => await getUserInfo(uid)))

Copy after login

这样的代码实现会同时实例化三个Promise，并请求getUserInfo

P.S. 草案中有一个await*，可以省去Promise.all

await Promise.all([1, 2, 3].map(async uid => await getUserInfo(uid)))

Copy after login

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));
}

Copy after login

co是帮助我们添加了Promise.all的处理的（膜拜TJ大佬）。

总结

总结一下关于async函数编写的几个小提示：

1.使用return Promise.reject()在async函数中抛出异常
2.让相互之间没有依赖关系的异步函数同时执行
3.不要在循环的回调中/for、while循环中使用await，用map来代替它

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！