Heim > Web-Frontend > js-Tutorial > Hauptteil

Was sind die Verwendungszwecke von async&await in Koa2?

亚连
Freigeben: 2018-06-07 15:50:56
Original
1475 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich die Verwendung von async&await zum Verständnis von Koa2 vorgestellt. Jetzt teile ich es mit Ihnen und gebe Ihnen eine Referenz.

Koa ist ein sehr bekanntes serverseitiges Node-Framework mit den Versionen 1.x und 2.x. Ersteres verwendet einen Generator, um asynchrone Vorgänge auszuführen, und letzteres verwendet die neueste Async/Await-Lösung.

Als ich diese Schreibmethode zum ersten Mal verwendete, stieß ich auf ein Problem. Der Code lautet wie folgt:

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);
Nach dem Login kopieren

Testen wir es: curl http://localhost:3000

Erwartetes Ergebnis:

(Nach 3 Sekunden...)Aufgabe erledigt!

Allerdings ist die Die Realität ist:

(sofort)
Nicht gefunden

Was zum Teufel? Warum funktioniert es nicht wie erwartet? Dazu müssen wir verstehen, wie die Middleware in Koa in Reihe geschaltet ist. Wenn wir uns den Quellcode ansehen, sieht der Code für die Verkettung von Middleware wie folgt aus:

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)
   }
  }
 }
}
Nach dem Login kopieren

Schauen wir uns auf der oben genannten Grundlage die vorherige Frage an: Warum kommt die Antwort sofort zurück, ohne auf die zweite Middleware zu warten? hingerichtet?

Weil die erste Middleware keine asynchrone Funktion ist.

Da jede Ausführung der nächsten Methode tatsächlich ein Promise-Objekt zurückgibt, müssen wir, wenn wir eine asynchrone Operation in einer Middleware ausführen möchten, dies tun, bevor wir die Middleware ausführen

Dann schreiben wir den vorherigen Code neu

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
})
Nach dem Login kopieren

Okay, kein Problem, alles wird wie erwartet ausgeführt: clap:

Fehlerbehandlung

Mit der leistungsstarken Leistungsfähigkeit von Promise und der Async/Await-Syntax müssen wir nur die Try/Catch-Operation in die äußerste Middleware schreiben und können alle nachfolgenden Middleware-Ausnahmen erfassen!

app.use(async (ctx, next) => {
  try{
    await next()
  }catch(err){
    console.log(err)
  }
})

app.use(async (ctx)=>{
  throw new Error(&#39;something wrong!&#39;)
  ctx.body = &#39;Hello&#39;
})
Nach dem Login kopieren

Volle Kontrolle basierend auf der Middleware-Kette und die Tatsache, dass sie auf Promise basiert, macht alles einfach zu bedienen. Es gibt nicht mehr „if“ (ähm) „return next“ (ähm) überall, sondern nur „versprechen“ Das Obige ist das, was ich für alle zusammengestellt habe. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

So implementieren Sie einen dynamischen Fortschrittsbalken in D3.js

Implementieren einer modalen Box in Vue (allgemeine Schreibmethode)

So erstellen Sie eine WebApp-Umgebung in Vue.js 2.0 und Cordova-Entwicklung

Das obige ist der detaillierte Inhalt vonWas sind die Verwendungszwecke von async&await in Koa2?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage