理解Koa2中的async&await的用法


Posted in Javascript onFebruary 05, 2018

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
类似框架的js代码
Nov 09 Javascript
Extjs中RowExpander控件的默认展开问题示例探讨
Jan 24 Javascript
DOM基础教程之事件对象
Jan 20 Javascript
JavaScript学习笔记之Cookie对象
Jan 22 Javascript
javascript多物体运动实现方法分析
Jan 08 Javascript
Jquery实现跨域异步上传文件总结
Feb 03 Javascript
jQuery插件HighCharts绘制2D金字塔图效果示例【附demo源码下载】
Mar 09 Javascript
jQuery实现动态生成表格并为行绑定单击变色动作的方法
Apr 17 jQuery
解决webpack无法通过IP地址访问localhost的问题
Feb 22 Javascript
webpack实现一个行内样式px转vw的loader示例
Sep 13 Javascript
angular5 子组件监听父组件传入值的变化方法
Sep 30 Javascript
element-ui table span-method(行合并)的实现代码
Dec 20 Javascript
zTree 树插件实现全国五级地区点击后加载的示例
Feb 05 #Javascript
使用vue如何构建一个自动建站项目
Feb 05 #Javascript
在 webpack 中使用 ECharts的实例详解
Feb 05 #Javascript
在Vue中使用echarts的方法
Feb 05 #Javascript
JavaScript中Object基础内部方法图
Feb 05 #Javascript
基于axios封装fetch方法及调用实例
Feb 05 #Javascript
JS设计模式之观察者模式实现实时改变页面中金额数的方法
Feb 05 #Javascript
You might like
纯真IP数据库的应用 IP地址转化成十进制
2009/06/14 PHP
php删除左端与右端空格的方法
2014/11/29 PHP
PHP编写daemon process详解及实例代码
2016/09/30 PHP
PHP中关于php.ini参数优化详解
2020/02/28 PHP
传递参数的标准方法(jQuery.ajax)
2008/11/19 Javascript
jquery学习笔记 用jquery实现无刷新登录
2011/08/08 Javascript
javascript 构造函数强制调用经验总结
2012/12/02 Javascript
SwfUpload在IE10上不出现上传按钮的解决方法
2013/06/25 Javascript
jquery的选择器的使用技巧之如何选择input框
2013/09/22 Javascript
深入理解JavaScript高级之词法作用域和作用域链
2013/12/10 Javascript
基于jquery实现瀑布流布局
2020/06/28 Javascript
node.js使用cluster实现多进程
2016/03/17 Javascript
去除字符串左右两边的空格(实现代码)
2016/05/12 Javascript
JS实现pasteHTML兼容ie,firefox,chrome的方法
2016/06/22 Javascript
vue.js 表格分页ajax 异步加载数据
2016/10/18 Javascript
jQuery学习笔记——jqGrid的使用记录(实现分页、搜索功能)
2016/11/09 Javascript
微信小程序 网络请求(GET请求)详解
2016/11/16 Javascript
BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤
2017/08/07 Javascript
nodejs实现简单的gulp打包
2017/12/21 NodeJs
Vue.js单向绑定和双向绑定实例分析
2018/08/14 Javascript
js核心基础之闭包的应用实例分析
2019/05/11 Javascript
深入理解Vue keep-alive及实践总结
2019/08/21 Javascript
vue实现购物车选择功能
2020/01/10 Javascript
详解python中递归函数
2019/04/16 Python
Python自动化导出zabbix数据并发邮件脚本
2019/08/16 Python
Python正则表达式急速入门(小结)
2019/12/16 Python
记一次pyinstaller打包pygame项目为exe的过程(带图片)
2020/03/02 Python
前端隐藏出边界内容的实现方法
2016/04/14 HTML / CSS
html5实现九宫格抽奖可固定抽中某项奖品
2020/06/15 HTML / CSS
创建市级文明单位实施方案
2014/03/01 职场文书
诚信考试承诺书
2014/03/27 职场文书
2015年司机工作总结
2015/04/23 职场文书
2016教师校本培训心得体会
2016/01/08 职场文书
判断Python中的Nonetype类型
2021/05/25 Python
详解在OpenCV中如何使用图像像素
2022/03/03 Python
win11无法登录onedrive错误代码0x8004def7怎么办 ?
2022/04/05 数码科技