详解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 相关文章推荐
鼠标滚轮控制网页横向移动实现思路
Mar 22 Javascript
js简单实现用户注册信息的校验代码
Nov 15 Javascript
js实现上传文件添加和删除文件选择框
Oct 24 Javascript
微信小程序 POST请求(网络请求)详解及实例代码
Nov 16 Javascript
JS使用插件cryptojs进行加密解密数据实例
May 11 Javascript
BootStrap selectpicker后台动态绑定数据
Jun 01 Javascript
浅谈原生JS中的延迟脚本和异步脚本
Jul 12 Javascript
JavaScript中click和onclick本质区别与用法分析
Jun 07 Javascript
vue-cli 目录结构详细讲解总结
Jan 15 Javascript
详解keep-alive + vuex 让缓存的页面灵活起来
Apr 19 Javascript
js打开word文档预览操作示例【不是下载】
May 23 Javascript
ant design vue导航菜单与路由配置操作
Oct 28 Javascript
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
使用PHP curl模拟浏览器抓取网站信息
2013/10/28 PHP
php加密解密实用类分享
2014/01/07 PHP
PHP判断来访是搜索引擎蜘蛛还是普通用户的代码小结
2015/09/14 PHP
PHP网站建设的流程与步骤分享
2015/09/25 PHP
php生成图片缩略图功能示例
2017/02/22 PHP
php使用curl获取header检测开启GZip压缩的方法
2018/08/15 PHP
如何用js控制css中的float的代码
2007/08/16 Javascript
JavaScript对象模型-执行模型
2008/04/28 Javascript
Javascript 倒计时源代码.(时.分.秒) 详细注释版
2011/05/09 Javascript
JavaScript 放大镜 放大倍率和视窗尺寸
2011/05/09 Javascript
在浏览器中获取当前执行的脚本文件名的代码
2011/07/19 Javascript
JavaScript建立一个语法高亮输入框实现思路
2013/02/26 Javascript
jQuery中bind()方法用法实例
2015/01/19 Javascript
javascript实现起伏的水波背景效果
2016/05/16 Javascript
EasyUI在表单提交之前进行验证的实例代码
2016/06/24 Javascript
JS DOMReady事件的六种实现方法总结
2016/11/23 Javascript
详解Javascript百度地图接口开发文档中的类和方法
2017/02/07 Javascript
基于angular实现三级联动的生日插件
2017/05/12 Javascript
nodejs后台集成ueditor富文本编辑器的实例
2017/07/11 NodeJs
详解Vue.js中.native修饰符
2018/04/24 Javascript
Vue 实现一个命令式弹窗组件功能
2019/09/25 Javascript
使用Webpack提升Vue.js应用程序的4种方法(翻译)
2019/10/09 Javascript
Python设计模式之观察者模式实例
2014/04/26 Python
python的tkinter布局之简单的聊天窗口实现方法
2014/09/03 Python
Python简单实现TCP包发送十六进制数据的方法
2016/04/16 Python
深入理解python对json的操作总结
2017/01/05 Python
python3实现字符串操作的实例代码
2019/04/16 Python
Python爬虫实现的根据分类爬取豆瓣电影信息功能示例
2019/09/15 Python
python3 deque 双向队列创建与使用方法分析
2020/03/24 Python
html5调用app分享功能示例(WebViewJavascriptBridge)
2018/03/21 HTML / CSS
在线购买澳大利亚设计师手拿包和奢华晚装手袋:Olga Berg
2019/03/20 全球购物
日本最大化妆品和美容产品的综合口碑网站:cosme shopping
2019/08/28 全球购物
竞选班干部演讲稿300字
2014/08/20 职场文书
老公保证书怎么写
2015/02/26 职场文书
2015年清明节网上祭英烈活动总结
2015/03/26 职场文书
教师信息技术学习心得体会
2016/01/21 职场文书