视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
async与await的用法详解
2020-11-27 19:58:30 责编:小采
文档


这次给大家带来async与await的用法详解,使用async与await的注意事项有哪些,下面就是实战案例,一起来看一下。

Koa是一款非常著名的Node服务端框架,有1.x版本和2.x版本。前者使用了generator来进行异步操作,后者则用了最新的async/await方案

一开始使用这种写法的时候,我遇到一个问题,代码如下:

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

让我们测试一下:curl http://localhost:3000

期望结果:

(3秒后...)task done!

然而现实却是:

(立即)
Not Found

什么鬼?为什么没有按照预期执行?这就需要我们来理解下Koa中中间件是如何串联起来的了。翻一下源码,将middlewares串联起来的代码如下:

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('next() called multiple times'))
 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)
 }
 }
 }
}

有了以上基础,我们再来看一下之前的问题,为什么response没有等到第二个middleware执行完成就立即返回了呢?

因为第一个middleware并不是一个异步函数啊。

由于每次next方法的执行,实际上都是返回了一个Promise对象,所以如果我们在某个middleware中执行了异步操作,要想等待其完成,就要在执行这个middleware之前添加await

那我们来改写一下之前的代码

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

好了,没有问题,一切如期望执行:clap:

错误处理

借助了Promise强大的功力,配合async/await语法,我们只需要把try/catch的操作写在最外层的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'
})

基于中间件链的完全控制,并且基于 Promise 的事实使得一切都变得容易操作起来。不再是到处的 if (err) return next(err) 而只有 promise

相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!

推荐阅读:

datepicker怎么使用

mixin的高阶组件使用详解

ejsExcel模板在Vue.js中的使用

下载本文
显示全文
专题