Explication détaillée de l'utilisation de async et wait

Cette fois, je vais vous apporter une explication détaillée de l'utilisation de async et wait. Quelles sont les précautions lors de l'utilisation d'async et wait. Voici des cas pratiques, jetons un coup d'œil.

Koa est un framework côté serveur Node très connu, avec les versions 1.x et 2.x. Le premier utilise un générateur pour effectuer des opérations asynchrones, et le second utilise la dernière solution async/await

Lorsque j'ai commencé à utiliser cette méthode d'écriture, j'ai rencontré un problème le code est le suivant :

<.>

const Koa = require('koa');
const app = new Koa();
const doSomething = time => {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('task done!')
    }, time)
  })
}
// 用来打印请求信息
app.use((ctx, next) => {
  console.log(`${ctx.method}:::${ctx.url}`)
  next()
})
app.use(async ctx => {
  const result = await doSomething(3000)
  console.log(result);
  ctx.body = result
})
app.listen(3000);

Testons-le : curl http://localhost:3000

Résultat attendu :

(Après 3 secondes...) tâche terminée !

Cependant , réalité Mais c'était :

(immédiatement)

Introuvable

C'est quoi ce bordel ? Pourquoi ne fonctionne-t-il pas comme prévu ? Cela nous oblige à comprendre comment le

middleware de Koa est connecté en série. En parcourant le code source, le code pour concaténer les middlewares est le suivant :

function compose (middleware) {
 return function (context, next) {
  // 这个index用来计数，防止next被多次调用
  let index = -1
  // 执行入口
  return dispatch(0)
  
  function dispatch (i) {
   // 如果next被多次调用，报异常
   if (i <= index) return Promise.reject(new Error(&#39;next() called multiple times&#39;))
   index = i
   // 取出第一个middleware
   let fn = middleware[i]
   // 将最初传入的next作为最后一个函数执行
   if (i === middleware.length) fn = next
   if (!fn) return Promise.resolve()
   try {
    /**
    这里就是关键了,Promise.resolve是什么意思呢？
     Promise.resolve方法有下面三种形式：
     
     Promise.resolve(value);
     Promise.resolve(promise);
     Promise.resolve(theanable);
     
    这三种形式都会产生一个新的Promise。其中：
    第一种形式提供了自定义Promise的值的能力，它与Promise.reject(reason)对应。两者的不同，在于得到的Promise的状态不同。
    第二种形式，提供了创建一个Promise的副本的能力。
    第三种形式，是将一个类似Promise的对象转换成一个真正的Promise对象。它的一个重要作用是将一个其他实现的Promise对象封装成一个当前实现的Promise对象。例如你正在用bluebird，但是现在有一个Q的Promise，那么你可以通过此方法把Q的Promise变成一个bluebird的Promise。第二种形式可以归在第三种里面
    
    **/
    return Promise.resolve(fn(context, function next () {
     // 执行下一个middleware，返回结果也是一个Promise
     return dispatch(i + 1)
    }))
   } catch (err) {
    return Promise.reject(err)
   }
  }
 }
}

Avec la base ci-dessus, jetons un œil à la question précédente Pourquoi la réponse revient-elle immédiatement sans attendre le deuxième middleware. être exécuté ?

Parce que le premier middleware n'est pas une fonction asynchrone.

Puisque chaque exécution de la méthode suivante renvoie en fait un objet Promise, si nous effectuons une opération asynchrone dans un middleware, si nous voulons attendre qu'elle se termine, nous devons le faire avant d'exécuter le middleware Add wait.

Ensuite réécrivons le code précédent

app.use(async (ctx, next) => {
  console.log(`${ctx.method}:::${ctx.url}`)
  await next()
})
app.use(async ctx => {
  const result = await doSomething(3000)
  console.log(result);
  ctx.body = result
})

D'accord, pas de problème, tout fonctionne comme prévu : clap:

Gestion des erreurs

Avec l'aide de la puissance puissante de Promise et de la syntaxe async/await, il nous suffit d'écrire l'opération try/catch dans le middleware le plus externe, puis de capturer les exceptions pour tous les middleware !

app.use(async (ctx, next) => {
  try{
    await next()
  }catch(err){
    console.log(err)
  }
})
app.use(async (ctx)=>{
  throw new Error('something wrong!')
  ctx.body = 'Hello'
})

Un contrôle total basé sur la chaîne middleware, et le fait qu'il soit basé sur Promise rend tout facile à utiliser. Il n'y a plus if (err) return next(err) partout, mais seulement promesse

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres. articles sur le site PHP chinois !

Lecture recommandée :

Comment utiliser datepicker

Explication détaillée de l'utilisation des composants de haut niveau de mixin

Utilisation du modèle ejsExcel dans Vue.js

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!