深入理解ES7的async/await的用法


Posted in Javascript onSeptember 09, 2017

在最开始学习ES6的Promise时,曾写过一篇博文 《promise和co搭配生成器函数方式解决js代码异步流程的比较》 ,文章中对比了使用Promise和co模块搭配生成器函数解决js异步的异同。

在文章末尾,提到了ES7的async和await,只是当时只是简单的提了一下,并未做深入探讨。

在前两个月发布的Nodejs V7中,已添加了对async和await的支持,今天就来对这个东东做一下深入的探究。以更加优雅的方法写异步代码。

async/await是什么

async/await可以说是co模块和生成器函数的语法糖。用更加清晰的语义解决js异步代码。

熟悉co模块的同学应该都知道,co模块是TJ大神写的一个使用生成器函数来解决异步流程的模块,可以看做是生成器函数的执行器。而async/await则是对co模块的升级,内置生成器函数的执行器,不再依赖co模块。同时,async返回的是Promise。

从上面来看,不管是co模块还是async/await,都是将Promise作为最基础的单元,对Promise不很了解的同学可以先深入了解一下Promise。

对比Promise,co,async/await

下面我们使用一个简单的例子,来对比一下三种方式的异同,以及取舍。

我们采用mongodb的nodejs驱动,查询mongodb数据库作为例子,原因是mongodb的js驱动已经默认实现了返回Promise,而不用我们单独去包装Promise了。

使用Promise链

MongoClient.connect(url + db_name).then(db=> {
 return db.collection('blogs');
}).then(coll=> {
 return coll.find().toArray();
}).then(blogs=> {
 console.log(blogs.length);
}).catch(err=> {
 console.log(err);
})

Promise的then()方法可以返回另一个Promise,也可以返回一个同步的值,如果返回的是一个同步值,将会被包装成一个Promise。

上面的例子中,db.collection()将返回一个同步的值,即集合对象,但是被包装成Promise,将会透传到下一个then()方法。

上面一个例子,是使用的Promise链。

先连接数据库MongoClient.connect()返回一个Promise,然后在then()方法里获得数据库对象db,然后再获取到coll对象再返回。在下一个then()方法获得coll对象,然后进行查询,查询结果返回,逐层调用then()方法,形成一个Promise链。

在这个Promise链上,如果任何一个环节出现异常,都会被最后的catch()捕捉到。

可以说,这个使用Promise链写的代码,比层层调用回调函数更优雅,流程也更明确。先获得数据库对象,再获得集合对象,最后查询数据。

但是这里有个不怎么“优雅”的问题,在于,每一个then()方法获取的对象,都是上一个then()方法返回的数据。而不能跨层访问。

什么意思,就是说在第三个then(blogs => {})中我们只能获取到查询的结果blogs,而不能使用上面的db对象和coll对象。这个时候,如果要打印出blogs列表后,要关闭数据库db.close()怎么办?

这个时候,可以两种解决方法:

第一种是,使用then()嵌套。我们将Promise链打断,使之嵌套,犹如使用回调函数的嵌套一般:

MongoClient.connect(url + db_name).then(db=> {
 let coll = db.collection('blogs');
 coll.find().toArray().then(blogs=> {
  console.log(blogs.length);
  db.close();
 }).catch(err=> {
  console.log(err);
 });
}).catch(err=> {
 console.log(err);
})

这里我们将两个Promise嵌套,这样在最后一个查询操作里面,就可以调用外面的db对象了。但是这中方式,并不推荐。原因很简单,我们从一种回调函数地狱走向了另一种Promise回调地狱。

而且,我们要对每个Promise的异常进行捕捉,因为Promise没有形成链。

还有一种方式, 是在每个then()方法里都将db传过来:

MongoClient.connect(url + db_name).then(db=> {
 return {db:db,coll:db.collection('blogs')};
}).then(result=> {
 return {db:result.db,blogs:result.coll.find().toArray()};
}).then(result=> {
 return result.blogs.then(blogs=> { //注意这里,result.coll.find().toArray()返回的是一个Promise,因此这里需要再解析一层
  return {db:result.db,blogs:blogs}
 })
}).then(result=> {
 console.log(result.blogs.length);
 result.db.close();
}).catch(err=> {
 console.log(err);
});

我们在每个then()方法的返回中,都将db及其每次的其他结果组成一个对象返回。请注意,如果每次的结果都是一个同步的值还好说,但是如果是一个Promise值,每一个Promise都需要多做一层解析。

例如上面的一个例子,第二个then()方法返回的 {db:result.db,blogs:result.coll.find().toArray()} 对象中, blogs 是一个Promise,在下一个then()方法中,我们无法直接引用博客列表数组值,因此需要先调用then()方法解析一层,然后将两个同步值db和blogs返回。

注意,这里涉及到了Promise的嵌套,不过一个Promise只嵌套一层then()。

这种方式,也是很蛋疼的一个方式,因为如果遇到then()方法中返回的不是同步的值,而是Promise的话,我们需要多做很多工作。而且,每次都透传一个“多余”的db对象,在逻辑上也有点冗余。

但除此之外,对于Promise链的使用,如果遇到上面的问题,好像也没其他更好的方法解决了。我们只能根据场景去选择一种“最优”的方案,如果要使用Promise链的话。

鉴于Promise上面蛋疼的问题,TJ大神将ES6中的生成器函数,用co模块包装了一下,以更优雅的方式来解决上面的问题。

co搭配生成器函数

如果使用co模块搭配生成器函数,那么上面的例子可以改写如下:

const co = require('co');
co(function* (){
 let db = yield MongoClient.connect(url + db_name);
 let coll = db.collection('blogs');
 let blogs = yield coll.find().toArray();
 console.log(blogs.length);
 db.close();
}).catch(err=> {
 console.log(err);
});

co是一个函数,将接受一个生成器函数作为参数,去执行这个生成器函数。生成器函数中使用 yield 关键字来“同步”获取每个异步操作的值。

上面代码在代码形式上,比上面使用Promise链要优雅,我们消灭了回调函数,代码看起来都是同步的。除了使用co和yield有点怪之外。

使用co模块,我们要将所有的操作包装成一个生成器函数,然后使用co()去调用这个生成器函数。看上去也还可以接受,但是ES的进化是不满足于此的,于是async/await被提到了ES7的提案。

async/await

我们先看一下使用async/await改写上面的代码:

(async function(){
 let db = await MongoClient.connect(url + db_name);
 let coll = db.collection('blogs');
 let blogs = await coll.find().toArray();
 console.log(blogs.length);
 db.close();
})().catch(err=> {
 console.log(err);
});

我们对比代码可以看出,async/await和co两种方式代码极为相似。

co换成了async,yield换成了await。同时生成器函数变成了普通函数。

这种方式在语义上更加清晰明了,async表明这个函数是异步的,同时await表示要“等待”异步操作返回值。

async函数返回一个Promise,上面的代码其实是这样:

let getBlogs = async function(){
 let db = await MongoClient.connect(url + db_name);
 let coll = db.collection('blogs');
 let blogs = await coll.find().toArray();
 db.close();
 return blogs;
};

getBlogs().then(result=> {
 console.log(result.length);
}).catch(err=> {
 console.log(err);
})

我们定义getBlogs为一个async函数,最后返回得到的博客列表最终会被包装成一个Promise返回,如上,我们直接调用getBlogs().then()方法可获取async函数返回值。

好了,上面我们简单对比了一下三种解决异步方案,下面我们来深入了解一下async/await。

深入async/await

async返回值

async用于定义一个异步函数,该函数返回一个Promise。

如果async函数返回的是一个同步的值,这个值将被包装成一个理解resolve的Promise,等同于return Promise.resolve(value)

await用于一个异步操作之前,表示要“等待”这个异步操作的返回值。await也可以用于一个同步的值。

//返回一个Promise
let timer = async functiontimer(){
 return new Promise((resolve,reject) => {
  setTimeout(()=> {
   resolve('500');
  },500);
 });
}

timer().then(result=> {
 console.log(result); //500
}).catch(err=> {
 console.log(err.message);
});
//返回一个同步的值
let sayHi = async functionsayHi(){
 let hi = await 'hello world'; 
 return hi; //等同于return Promise.resolve(hi);
}

sayHi().then(result=> {
 console.log(result);
});

上面这个例子返回是一个同步的值,字符串'hello world',sayHi()是一个async函数,返回值被包装成一个Promise,可以调用then()方法获取返回值。

对于一个同步的值,可以使用await,也可以不使用await。效果效果是一样的。具体用不用,看情况。

比如上面使用mongodb查询博客那个例子, let coll = db.collection('blogs'); ,这里我们就没有用await,因为这是一个同步的值。当然,也可以使用await,这样会显得代码统一。虽然效果是一样的。

async函数的异常

let sayHi = async functionsayHi(){
 throw new Error('出错了');
}
sayHi().then(result=> {
 console.log(result);
}).catch(err=> {
 console.log(err.message); //出错了
});

我们直接在async函数中抛出一个异常,由于返回的是一个Promise,因此,这个异常可以调用返回Promise的catch()方法捕捉到。

和Promise链的对比:

我们的async函数中可以包含多个异步操作,其异常和Promise链有相同之处,如果有一个Promise被reject()那么后面的将不会再进行。

let count = ()=>{
 return new Promise((resolve,reject) => {
  setTimeout(()=>{
   reject('故意抛出错误');
  },500);
 });
}

let list = ()=>{
 return new Promise((resolve,reject)=>{
  setTimeout(()=>{
   resolve([1,2,3]);
  },500);
 });
}

let getList = async ()=>{
 let c = await count();
 let l = await list();
 return {count:c,list:l};
}
console.time('begin');
getList().then(result=> {
 console.log(result);
}).catch(err=> {
 console.timeEnd('begin');
 console.log(err);
});
//begin: 507.490ms
//故意抛出错误

如上面的代码,定义两个异步操作,count和list,使用setTimeout延时500毫秒,count故意直接抛出异常,从输出结果来看,count()抛出异常后,直接由catch()捕捉到了,list()并没有继续执行。

并行

使用async后,我们上面的例子都是串行的。比如上个list()和count()的例子,我们可以将这个例子用作分页查询数据的场景。

先查询出数据库中总共有多少条记录,然后再根据分页条件查询分页数据,最后返回分页数据以及分页信息。

我们上面的例子count()和list()有个“先后顺序”,即我们先查的总数,然后又查的列表。其实,这两个操作并无先后关联性,我们可以异步的同时进行查询,然后等到所有结果都返回时再拼装数据即可。

let count = ()=>{
 return new Promise((resolve,reject) => {
  setTimeout(()=>{
   resolve(100);
  },500);
 });
}

let list = ()=>{
 return new Promise((resolve,reject)=>{
  setTimeout(()=>{
   resolve([1,2,3]);
  },500);
 });
}

let getList = async ()=>{
 let result = await Promise.all([count(),list()]);
 return result;
}
console.time('begin');
getList().then(result=> {
 console.timeEnd('begin'); //begin: 505.557ms
 console.log(result);  //[ 100, [ 1, 2, 3 ] ]
}).catch(err=> {
 console.timeEnd('begin');
 console.log(err);
});

我们将count()和list()使用Promise.all()“同时”执行,这里count()和list()可以看作是“并行”执行的,所耗时间将是两个异步操作中耗时最长的耗时。

最后得到的结果是两个操作的结果组成的数组。我们只需要按照顺序取出数组中的值即可。

JavaScript 中最蛋疼的事情莫过于回调函数嵌套问题。以往在浏览器中,因为与服务器通讯是一种比较昂贵的操作,因此比较复杂的业务逻辑往往都放在服务器端,前端 JavaScript 只需要少数几次 AJAX 请求就可拿到全部数据。

但是到了 webapp 风行的时代,前端业务逻辑越来越复杂,往往几个 AJAX 请求之间互有依赖,有些请求依赖前面请求的数据,有些请求需要并行进行。还有在类似 Node.js 的后端 JavaScript 环境中,因为需要进行大量 IO 操作,问题更加明显。这个时候使用回调函数来组织代码往往会导致代码难以阅读。

现在比较流行的解决这个问题的方法是使用 Promise,可以将嵌套的回调函数展平。但是写代码和阅读依然有额外的负担。

另外一个方案是使用 ES6 中新增的 generator,因为 generator 的本质是可以将一个函数执行暂停,并保存上下文,再次调用时恢复当时的状态。co 模块是个不错的封装。但是这样略微有些滥用 generator 特性的感觉。

ES7 中有了更加标准的解决方案,新增了 async/await 两个关键词。async 可以声明一个异步函数,此函数需要返回一个 Promise 对象。await可以等待一个 Promise 对象 resolve,并拿到结果。

比如下面的例子,以往我们无法在 JavaScript 中使用常见的 sleep 函数,只能使用 setTimeout 来注册一个回调函数,在指定的时间之后再执行。有了 async/await 之后,我们就可以这样实现了:

async function sleep(timeout) {
 return new Promise((resolve, reject) => {
 setTimeout(function() {
  resolve();
 }, timeout);
 });
}

(async function() {
 console.log('Do some thing, ' + new Date());
 await sleep(3000);
 console.log('Do other things, ' + new Date());
})();

执行此段代码,可以在终端中看到结果:

Do some thing, Mon Feb 23 2015 21:52:11 GMT+0800 (CST)
Do other things, Mon Feb 23 2015 21:52:14 GMT+0800 (CST)

另外 async 函数可以正常的返回结果和抛出异常。await 函数调用即可拿到结果,在外面包上 try/catch 就可以捕获异常。下面是一个从豆瓣 API 获取数据的例子:

var fetchDoubanApi = function() {
 return new Promise((resolve, reject) => {
 var xhr = new XMLHttpRequest();
 xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) {
  if (xhr.status >= 200 && xhr.status < 300) {
   var response;
   try {
   response = JSON.parse(xhr.responseText);
   } catch (e) {
   reject(e);
   }
   if (response) {
   resolve(response, xhr.status, xhr);
   }
  } else {
   reject(xhr);
  }
  }
 };
 xhr.open('GET', 'https://api.douban.com/v2/user/aisk', true);
 xhr.setRequestHeader("Content-Type", "text/plain");
 xhr.send(data);
 });
};

(async function() {
 try {
 let result = await fetchDoubanApi();
 console.log(result);
 } catch (e) {
 console.log(e);
 }
})();

async 函数的用法

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

async function getStockPriceByName(name) {
 var symbol = await getStockSymbol(name);
 var stockPrice = await getStockPrice(symbol);
 return stockPrice;
}

getStockPriceByName('goog').then(function (result){
 console.log(result);
});

阅读本文前,期待您对promise和ES6(ECMA2015)有所了解,会更容易理解。本文以体验为主,不会深入说明,结尾有详细的文章引用。

第一个例子

Async/Await应该是目前最简单的异步方案了,首先来看个例子。这里我们要实现一个暂停功能,输入N毫秒,则停顿N毫秒后才继续往下执行。

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。

基本规则

async 表示这是一个async函数,await只能用在这个函数里面。await表示在这里等待promise返回结果了,再继续执行。await 后面跟着的应该是一个promise对象(当然,其他返回值也没关系,只是会立即执行,不过那样就没有意义了…)

获得返回值

await等待的虽然是promise对象,但不必写.then(..),直接可以得到返回值。

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

捕捉错误

既然.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`
 }
};

循环多个await

await看起来就像是同步代码,所以可以理所当然的写在for循环里,不必担心以往需要闭包才能解决的问题。

..省略以上代码
var start = async function () {
 for (var i = 1; i <= 10; i++) {
  console.log(`当前是第${i}次等待..`);
  await sleep(1000);
 }
};

值得注意的是,await必须在async函数的上下文中的。

..省略以上代码

let one2ten = [1,2,3,4,5,6,7,8,9,10];

// 错误示范
one2ten.forEach(function (v) {
 console.log(`当前是第${v}次等待..`);
 await sleep(1000); // 错误!! await只能在async函数中运行
});

// 正确示范
for(var v of one2ten) {
 console.log(`当前是第${v}次等待..`);
 await sleep(1000); // 正确, for循环的上下文还在async函数中
}

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

Javascript 相关文章推荐
arguments对象
Nov 20 Javascript
JavaScript入门教程(1) 什么是JS
Jan 31 Javascript
jQuery validate 中文API 附validate.js中文api手册
Jul 31 Javascript
jquery获取特定name所有选中的checkbox,支持IE9标准模式
Mar 18 Javascript
用JavaScript计算在UTF-8下存储字符串占用字节数
Aug 08 Javascript
jQuery ajax调用WCF服务实例
Jul 16 Javascript
jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解
Sep 27 Javascript
老生常谈 关于JavaScript的类的继承
Jun 24 Javascript
Vue实现双向绑定的原理以及响应式数据的方法
Jul 02 Javascript
在vue项目中集成graphql(vue-ApolloClient)
Sep 08 Javascript
解决layer弹出层msg的文字不显示的问题
Sep 11 Javascript
Vue+Element-U实现分页显示效果
Nov 15 Javascript
jQuery事件对象的属性和方法详解
Sep 09 #jQuery
微信通过页面(H5)直接打开本地app的解决方法
Sep 09 #Javascript
React-Native中禁用Navigator手势返回的示例代码
Sep 09 #Javascript
js实现音乐播放控制条
Sep 09 #Javascript
Vue2.0用 watch 观察 prop 变化(不触发)
Sep 08 #Javascript
详解vue2 $watch要注意的问题
Sep 08 #Javascript
Express + Session 实现登录验证功能
Sep 08 #Javascript
You might like
PHP中array_slice函数用法实例详解
2014/11/25 PHP
PHP生成图片验证码功能示例
2017/01/12 PHP
Laravel中10个有用的用法小结
2019/05/06 PHP
漂亮的仿flash菜单,来自蓝色经典
2006/06/26 Javascript
学习js在线html(富文本,所见即所得)编辑器
2012/12/18 Javascript
javascript随机显示背景图片的方法
2015/06/18 Javascript
Bootstrap插件全集
2016/07/18 Javascript
理解 javascript 中的函数表达式与函数声明
2017/07/07 Javascript
Nodejs中使用phantom将html转为pdf或图片格式的方法
2017/09/18 NodeJs
vue.js实现三级菜单效果
2019/10/19 Javascript
vue路由切换之淡入淡出的简单实现
2019/10/31 Javascript
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
2020/05/19 jQuery
学习 Vue.js 遇到的那些坑
2021/02/02 Vue.js
[04:41]2014DOTA2国际邀请赛 Liquid顺利突围晋级正赛
2014/07/09 DOTA
Python中实现从目录中过滤出指定文件类型的文件
2015/02/02 Python
基于python实现的抓取腾讯视频所有电影的爬虫
2016/04/22 Python
Python获取某一天是星期几的方法示例
2017/01/17 Python
基于hashlib模块--加密(详解)
2017/06/21 Python
python并发编程之线程实例解析
2017/12/27 Python
python 类对象和实例对象动态添加方法(分享)
2017/12/31 Python
用python写扫雷游戏实例代码分享
2018/05/27 Python
如何通过python检查文件是否被占用
2020/12/18 Python
Room Mate Hotels美国:西班牙酒店品牌
2018/04/10 全球购物
阿姆斯特丹杜莎夫人蜡像馆官方网站:Madame Tussauds Amsterdam
2019/03/12 全球购物
Linux管理员面试经常问道的相关命令
2013/04/29 面试题
网上常见的一份Linux面试题(多项选择部分)
2014/09/09 面试题
医药工作岗位求职信分享
2013/12/31 职场文书
外贸业务员工作职责
2014/01/06 职场文书
保护动物倡议书
2014/04/15 职场文书
三分钟演讲稿范文
2014/04/24 职场文书
干部考核评语
2014/04/29 职场文书
护士医德考评自我评价
2015/03/03 职场文书
施工单位工程部经理岗位职责
2015/04/09 职场文书
小学教育见习总结
2015/06/23 职场文书
MySQL分区表管理命令汇总
2022/03/21 MySQL
Win11开始菜单添加休眠选项
2022/04/19 数码科技