详解node Async/Await 更好的异步编程解决方案


Posted in Javascript onMay 10, 2018

一、异步编程的终极解决方案

前几天写过关于 javascript 异步操作的文章《Javascript Promise 详解》. 最近在学习 Puppeteer 的时候又发现另一种异步编程解决方案:Async/Await.

异步操作是 JavaScript 编程的麻烦事,麻烦到一直有人提出各种各样的方案,试图解决这个问题。 从最早的回调函数,到 Promise 对象,再到 Generator 函数,每次都有所改进,但又让人觉得不彻底。 它们都有额外的复杂性,都需要理解抽象的底层运行机制。

在 Async 函数出来之后,有人认为它是异步编程的最终解决方案。因为有了 Async/Await 之后,你根本就不用关心是它是不是异步编程。

二、基本用法

async 函数返回一个 Promise 对象,可以使用 then 方法添加回调函数。 当函数执行的时候,一旦遇到 await 就会先返回,等到触发的异步操作完成,再接着执行函数体内后面的语句。

下面是一个栗子:

var sleep = function (time) {
  return new Promise(function (resolve, reject) {
    setTimeout(function () {
      resolve();
    }, time);
  })
};

var start = async function () {
  // 在这里使用起来就像同步代码那样直观
  console.log('start');
  await sleep(3000);
  console.log('end');
};

start();

执行上面的代码,你会发现,控制台先输出start,稍等3秒后,输出了end。

三、注意事项

1、await 命令只能用在 async 函数之中,如果用在普通函数,就会报错。

async function dbFuc(db) {
 let docs = [{}, {}, {}];

 // 报错
 docs.forEach(function (doc) {
  await db.post(doc);
 });
}

2、await 表示在这里等待promise返回结果了,再继续执行。

var sleep = function (time) {
  return new Promise(function (resolve, reject) {
    setTimeout(function () {
      // 返回 ‘ok'
      resolve('ok');
    }, time);
  })
};

var start = async function () {
  let result = await sleep(3000);
  console.log(result); // 收到 ‘ok'
};

3、await 后面跟着的应该是一个promise对象。

如果是同步执行的代码没有必要使用 await 修饰了。

4、await 只能使用在原生语法中,比如在 forEeach 结构中使用 await 是无法正常工作的,必须使用 for 循环的原生语法。

async function dbFuc(db) {
 let docs = [{}, {}, {}];

 // 可能得到错误结果
 docs.forEach(async function (doc) {
  await db.post(doc);
 });
}

如果确实希望多个请求并发执行,可以使用 Promise.all 方法。

async function dbFuc(db) {
 let docs = [{}, {}, {}];
 let promises = docs.map((doc) => db.post(doc));

 let results = await Promise.all(promises);
 console.log(results);
}

四、错误捕获

既然.then(..)不用写了,那么.catch(..)也不用写,可以直接用标准的try catch语法捕捉错误。

var sleep = function (time) {
  return new Promise(function (resolve, reject) {
    setTimeout(function () {
      // 模拟出错了,返回 ‘error'
      reject('error');
    }, time);
  })
};

var start = async function () {
  try {
    console.log('start');
    await sleep(3000); // 这里得到了一个返回错误
    
    // 所以以下代码不会被执行了
    console.log('end');
  } catch (err) {
    console.log(err); // 这里捕捉到错误 `error`
  }
};

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

Javascript 相关文章推荐
jquery.boxy插件的iframe扩展代码
Jul 02 Javascript
IE6图片加载的一个BUG解决方法
Jul 13 Javascript
js/jquery解析json和数组格式的方法详解
Jan 09 Javascript
javascript实现当前页导航激活的方法
Feb 27 Javascript
jQuery实现个性翻牌效果导航菜单的方法
Mar 09 Javascript
JS闭包用法实例分析
Mar 27 Javascript
webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)
Jan 09 Javascript
vue2.0获取鼠标位置的方法
Sep 13 Javascript
Node.js的进程管理的深入理解
Jan 09 Javascript
Node.js中Koa2在控制台输出请求日志的方法示例
May 02 Javascript
NUXT SSR初级入门笔记(小结)
Dec 16 Javascript
全面解析Vue中的$nextTick
Dec 24 Vue.js
Javascript Promise用法详解
May 10 #Javascript
jQuery实现模糊查询的方法分析
May 10 #jQuery
async/await地狱该如何避免详解
May 10 #Javascript
Angular4.x通过路由守卫进行路由重定向实现根据条件跳转到相应的页面(推荐)
May 10 #Javascript
JS中的JSON对象的定义和取值实现代码
May 09 #Javascript
js循环map 获取所有的key和value的实现代码(json)
May 09 #Javascript
js合并两个数组生成合并后的key:value数组
May 09 #Javascript
You might like
删除及到期域名的查看(抢域名必备哦)
2008/05/14 PHP
PHP的pcntl多进程用法实例
2015/03/19 PHP
PHP滚动日志的代码实现
2015/06/10 PHP
悄悄用脚本检查你访问过哪些网站的代码
2010/12/04 Javascript
一个分享按钮的插件使用介绍(可扩展,内附开发制作流程)
2011/09/19 Javascript
Jquery之Ajax运用 学习运用篇
2011/09/26 Javascript
JavaScript中的this关键字介绍与使用实例
2013/06/21 Javascript
JS Replace()的高级使用方法介绍
2013/06/29 Javascript
angularJS 中$attrs方法使用指南
2015/02/09 Javascript
jQuery验证插件validation使用指南
2015/04/21 Javascript
JavaScript仿商城实现图片广告轮播实例代码
2016/02/06 Javascript
JS数组返回去重后数据的方法解析
2017/01/03 Javascript
vue之数据交互实例代码
2017/06/20 Javascript
vue2.0 datepicker使用方法
2018/02/04 Javascript
vue中如何让子组件修改父组件数据
2018/06/14 Javascript
详解浏览器缓存和webpack缓存配置
2018/07/06 Javascript
bootstrap table合并行数据并居中对齐效果
2018/10/17 Javascript
Vue.js 父子组件通信的十种方式
2018/10/30 Javascript
微信小程序使用二次贝塞尔曲线画波浪
2018/12/25 Javascript
详解element上传组件before-remove钩子问题解决
2020/04/08 Javascript
Python 3中的yield from语法详解
2017/01/18 Python
Python中模块pymysql查询结果后如何获取字段列表
2017/06/05 Python
解决python gdal投影坐标系转换的问题
2020/01/17 Python
python opencv实现简易画图板
2020/08/27 Python
LocalStorage记住用户和密码功能
2017/07/24 HTML / CSS
STRATHBERRY苏贝瑞包包官网:西班牙高级工匠手工打造
2020/11/10 全球购物
毕业生自我鉴定
2013/12/04 职场文书
关于迟到的检讨书
2014/01/26 职场文书
拉歌口号大全
2014/06/13 职场文书
幼儿园家长安全责任书
2014/07/22 职场文书
会计专业求职信
2014/08/10 职场文书
县政府领导班子四风问题对照检查材料思想汇报
2014/09/26 职场文书
2015年三年级班主任工作总结
2015/05/21 职场文书
停车场管理制度范本
2015/08/05 职场文书
创业计划书之养殖业
2019/10/11 职场文书
20180830晚上第一届KSL半决赛 雨神vs解冻(二龙 三炮解说)
2022/04/01 星际争霸