Detailed explanation of the usage of async and await

This time I will bring you a detailed explanation of the usage of async and await. What are the precautions when using async and await. The following is a practical case, let's take a look.

Koa is a very famous Node server-side framework, with versions 1.x and 2.x. The former uses a generator to perform asynchronous operations, and the latter uses the latest async/await solution

When I first started using this writing method, I encountered a problem, the code is as follows:

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

Let us test it: curl http://localhost:3000

Expected result:

(After 3 seconds...)task done!

However, the reality is :

(immediately)
Not Found

What the hell? Why isn't it performing as expected? This requires us to understand how the middleware in Koa is connected in series. Looking through the source code, the code for concatenating middlewares is as follows:

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

With the above foundation, let’s take a look at the previous question. Why does the response return immediately without waiting for the second middleware to be executed?

Because the first middleware is not an asynchronous function.

Since each execution of the next method actually returns a Promise object, so if we perform an asynchronous operation in a middleware, if we want to wait for it to complete, we must do so before executing the middleware. Add await

Then let’s rewrite the previous code

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

Okay, there is no problem, everything is executed as expected:clap:

##Error handling

With the help of the powerful power of Promise and the async/await syntax, we only need to write the try/catch operation in the outermost middleware to capture all subsequent middleware Something unusual!

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

Full control based on the middleware chain, and the fact that it is based on Promise makes everything easy to operate. There is no longer if (err) return next(err) everywhere, but only promise

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

How to use datepicker

Detailed explanation of the use of high-level components of mixin

Usage of ejsExcel template in Vue.js

The above is the detailed content of Detailed explanation of the usage of async and await. For more information, please follow other related articles on the PHP Chinese website!