Explication détaillée des étapes pour écrire la fonction asynchrone js

Cette fois, je vais vous donner une explication détaillée des étapes d'écriture des fonctions asynchrones js. Quelles sont les précautions pour écrire des fonctions asynchrones js. Voici des cas pratiques, jetons un coup d'œil.

Mai 2018 est arrivé, et la version 4.x de node a également arrêté la maintenance. Un certain service de notre société a également été basculé vers 8.x. Nous migrons actuellement le générateur précédent vers koa2.x. . Remplacez tout par async. Cependant, pendant le processus de remplacement, nous avons constaté une perte de temps causée par l'abus d'async. Parlons donc de la façon d'optimiser le code asynchrone et d'utiliser pleinement le flux d'événements asynchrones pour éliminer l'abus de. async

Tout d'abord, vous devez comprendre Promise

Promise est la base de l'utilisation d'async/await, vous devez donc d'abord comprendre ce que fait Promise

La promesse est celle qui aide à résoudre l'enfer des rappels. Bonne chose, rend les processus asynchrones plus clairs.

Un exemple simple de conversion d'Error-first-callback en 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)
})

Nous appelons la fonction pour renvoyer une instance de Promise et lisons le fichier pendant le processus d'instanciation. le rappel de lecture est déclenché, les changements d'état de promesse, les changements d'état résolus ou rejetés sont surveillés à l'aide de then. Le premier rappel est pour le traitement de résolution et le deuxième rappel est pour le traitement de rejet.

La relation entre async et Promise

La fonction async est équivalente à une fonction raccourcie qui renvoie une instance Promise L'effet est le suivant. :

function getNumber () {
 return new Promise((resolve, reject) => {
  resolve(1)
 })
}
// =>
async function getNumber () {
 return 1
}

Les deux sont utilisés exactement de la même manière. Vous pouvez utiliser then pour surveiller la valeur de retour après avoir appelé la fonction getNumber. Et comment utiliser la syntaxe wait correspondant à async :

getNumber().then(data => {
 // got data
})
// =>
let data = await getNumber()

L'exécution de wait obtiendra le résultat de l'exécution de la promesse après l' expression , ce qui équivaut à ce que nous appelions then pour obtenir le résultat du rappel. P.S. Lorsque le support async/await n'était pas très élevé, tout le monde choisissait d'utiliser le générateur/yield combiné avec certaines bibliothèques similaires pour obtenir des effets similaires

L'exécution du code de la fonction asynchrone est synchrone et le résultat est renvoyé. asynchrone

Il est très important que la fonction asynchrone renvoie toujours une instance de Promise, donc lors de l'appel d'une fonction asynchrone, on peut comprendre que le code à l'intérieur est dans une nouvelle Promise, il est donc exécuté de manière synchrone Le retour final l'opération équivaut à appeler solve dans Promise :

async function getNumber () {
 console.log('call getNumber()')
 return 1
}
getNumber().then(_ => console.log('resolved'))
console.log('done')
// 输出顺序：
// call getNumber()
// done
// resolved

La Promesse à l'intérieur de la Promesse sera digérée

aussi C'est-à-dire, si nous avons le code suivant :

function getNumber () {
 return new Promise(resolve => {
  resolve(Promise.resolve(1))
 })
}
getNumber().then(data => console.log(data)) // 1

Si nous suivons ce qui est dit ci-dessus, les données que nous obtenons devraient alors être la valeur transmise dans solve, qui est une autre instance de Promise.
Mais en fait, nous obtiendrons directement la valeur de retour : 1. C'est-à-dire que si une promesse est renvoyée dans Promise, le programme nous aidera en fait à exécuter cette promesse et à la déclencher lorsque l'état interne de la promesse changera. .
Une chose intéressante :

function getNumber () {
 return new Promise(resolve => {
  resolve(Promise.reject(new Error('Test')))
 })
}
getNumber().catch(err => console.error(err)) // Error: Test

Si nous transmettons un rejet en résolution, nous pouvons directement utiliser catch pour le surveiller en externe.
Cette méthode est souvent utilisée pour lancer des exceptions dans les fonctions asynchrones Comment lancer des exceptions dans les fonctions asynchrones :

async function getNumber () {
 return Promise.reject(new Error('Test'))
}
try {
 let number = await getNumber()
} catch (e) {
 console.error(e)
}

N'oubliez pas le mot-clé wait

Si vous oubliez d'ajouter le mot-clé wait, aucune erreur ne sera signalée au niveau du code, mais la valeur de retour que nous recevons est une promesse

let number = getNumber()
console.log(number) // Promise

So Be assurez-vous de vous souvenir du mot-clé wait lorsque vous l'utilisez

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

Tous les endroits n'ont pas besoin d'ajouter wait

Pendant l'exécution du code, parfois, tous les asyncs n'ont pas besoin d'être ajoutés wait. Par exemple, l'opération suivante sur les fichiers :

Nous supposons que toutes les API de fs ont été converties en versions Promise par nos soins

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

Nous ouvrons un fichier via wait, puis écrivons le fichier entrez deux fois.

Mais notez que nous n'avons pas ajouté le mot clé wait avant les deux opérations d'écriture de fichiers.
Parce que c'est redondant, il suffit de notifier à l'API que je souhaite écrire une ligne de texte dans ce fichier. L'ordre sera naturellement contrôlé par fs
Ensuite, on utilise wait pour fermer le fichier à la fin. .
Parce que si nous exécutons le processus d'écriture ci-dessus, le rappel de fermeture ne sera pas déclenché
En d'autres termes, le déclenchement du rappel signifie que les deux étapes d'écriture ci-dessus sont terminées.

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

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

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中文网其它相关文章！

推荐阅读：

js中async函数使用方法详解

node搭建服务器,写接口,调接口,跨域方法详解

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!