Javascript中的async awai的用法


Posted in Javascript onMay 17, 2017

async / await是ES7的重要特性之一,也是目前社区里公认的优秀异步解决方案。目前,async / await这个特性已经是stage 3的建议,可以看看TC39的进度,本篇文章将分享async / await是如何工作的,阅读本文前,希望你具备Promise、generator、yield等ES6的相关知识。

在详细介绍async / await之前,先回顾下目前在ES6中比较好的异步处理办法。下面的例子中数据请求用Node.js中的request模块,数据接口采用Github v3 api文档提供的repo代码仓库详情API作为例子演示。

Promise对异步的处理

虽然Node.js的异步IO带来了对高并发的良好支持,同时也让“回调”成为灾难,很容易造成回调地狱。传统的方式比如使用具名函数,虽然可以减少嵌套的层数,让代码看起来比较清晰。但是会造成比较差的编码和调试体验,你需要经常使用用ctrl + f去寻找某个具名函数的定义,这使得IDE窗口经常上下来回跳动。使用Promise之后,可以很好的减少嵌套的层数。另外Promise的实现采用了状态机,在函数里面可以很好的通过resolve和reject进行流程控制,你可以按照顺序链式的去执行一系列代码逻辑了。下面是使用Promise的一个例子:

const request = require('request');
// 请求的url和header
const options = {
 url: 'https://api.github.com/repos/cpselvis/zhihu-crawler',
 headers: {
  'User-Agent': 'request'
 }
};
// 获取仓库信息
const getRepoData = () => {
 return new Promise((resolve, reject) => {
  request(options, (err, res, body) => {
   if (err) {
    reject(err);
   }
   resolve(body);
  });
 });
};

getRepoData()
 .then((result) => console.log(result);)
 .catch((reason) => console.error(reason););

// 此处如果是多个Promise顺序执行的话,如下:
// 每个then里面去执行下一个promise
// getRepoData()
//  .then((value2) => {return promise2})
//  .then((value3) => {return promise3})
//  .then((x) => console.log(x))

不过Promise仍然存在缺陷,它只是减少了嵌套,并不能完全消除嵌套。举个例子,对于多个promise串行执行的情况,第一个promise的逻辑执行完之后,我们需要在它的then函数里面去执行第二个promise,这个时候会产生一层嵌套。另外,采用Promise的代码看起来依然是异步的,如果写的代码如果能够变成同步该多好啊!

Generator对异步的处理

谈到generator,你应该不会对它感到陌生。在Node.js中对于回调的处理,我们经常用的TJ / Co就是使用generator结合promise来实现的,co是coroutine的简称,借鉴于python、lua等语言中的协程。它可以将异步的代码逻辑写成同步的方式,这使得代码的阅读和组织变得更加清晰,也便于调试。

const co = require('co');
const request = require('request');

const options = {
 url: 'https://api.github.com/repos/cpselvis/zhihu-crawler',
 headers: {
  'User-Agent': 'request'
 }
};
// yield后面是一个生成器 generator
const getRepoData = function* () {
 return new Promise((resolve, reject) => {
  request(options, (err, res, body) => {
   if (err) {
    reject(err);
   }
   resolve(body);
  });
 });
};

co(function* () {
 const result = yield getRepoData;
 // ... 如果有多个异步流程,可以放在这里,比如
 // const r1 = yield getR1;
 // const r2 = yield getR2;
 // const r3 = yield getR3;
 // 每个yield相当于暂停,执行yield之后会等待它后面的generator返回值之后再执行后面其它的yield逻辑。
 return result;
}).then(function (value) {
 console.log(value);
}, function (err) {
 console.error(err.stack);
});

async / await对异步的处理

虽然co是社区里面的优秀异步解决方案,但是并不是语言标准,只是一个过渡方案。ES7语言层面提供async / await去解决语言层面的难题。目前async / await 在 IE edge中已经可以直接使用了,但是chrome和Node.js还没有支持。幸运的是,babel已经支持async的transform了,所以我们使用的时候引入babel就行。在开始之前我们需要引入以下的package,preset-stage-3里就有我们需要的async/await的编译文件。

无论是在Browser还是Node.js端都需要安装下面的包。

$ npm install babel-core --save
$ npm install babel-preset-es2015 --save
$ npm install babel-preset-stage-3 --save

这里推荐使用babel官方提供的require hook方法。就是通过require进来后,接下来的文件进行require的时候都会经过Babel的处理。因为我们知道CommonJs是同步的模块依赖,所以也是可行的方法。这个时候,需要编写两个文件,一个是启动的js文件,另外一个是真正执行程序的js文件。

启动文件index.js

require('babel-core/register');
require('./async.js');

真正执行程序的async.js

const request = require('request');

const options = {
 url: 'https://api.github.com/repos/cpselvis/zhihu-crawler',
 headers: {
  'User-Agent': 'request'
 }
};

const getRepoData = () => {
 return new Promise((resolve, reject) => {
  request(options, (err, res, body) => {
   if (err) {
    reject(err);
   }
   resolve(body);
  });
 });
};

async function asyncFun() {
 try {
  const value = await getRepoData();
  // ... 和上面的yield类似,如果有多个异步流程,可以放在这里,比如
  // const r1 = await getR1();
  // const r2 = await getR2();
  // const r3 = await getR3();
  // 每个await相当于暂停,执行await之后会等待它后面的函数(不是generator)返回值之后再执行后面其它的await逻辑。
  return value;
 } catch (err) {
  console.log(err);
 }
}

asyncFun().then(x => console.log(`x: ${x}`)).catch(err => console.error(err));

注意点:

  1. async用来申明里面包裹的内容可以进行同步的方式执行,await则是进行执行顺序控制,每次执行一个await,程序都会暂停等待await返回值,然后再执行之后的await。
  2. await后面调用的函数需要返回一个promise,另外这个函数是一个普通的函数即可,而不是generator。
  3. await只能用在async函数之中,用在普通函数中会报错。
  4. await命令后面的 Promise 对象,运行结果可能是 rejected,所以最好把 await 命令放在 try...catch 代码块中。

其实,async / await的用法和co差不多,await和yield都是表示暂停,外面包裹一层async 或者 co来表示里面的代码可以采用同步的方式进行处理。不过async / await里面的await后面跟着的函数不需要额外处理,co是需要将它写成一个generator的。

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

Javascript 相关文章推荐
加载jQuery后$冲突的解决办法
Jul 09 Javascript
解析使用JS 清空File控件的路径值
Jul 08 Javascript
js中Math之random,round,ceil,floor的用法总结
Dec 26 Javascript
js+canvas绘制矩形的方法
Jan 28 Javascript
在html中引入外部js文件,并调用带参函数的方法
Oct 31 Javascript
B/S(Web)实时通讯解决方案分享
Apr 06 Javascript
react-native fetch的具体使用方法
Nov 01 Javascript
分析JavaScript数组操作难点
Dec 18 Javascript
基于Swiper实现移动端页面图片轮播效果
Dec 28 Javascript
详解基于Koa2开发微信二维码扫码支付相关流程
May 16 Javascript
vue template中slot-scope/scope的使用方法
Sep 06 Javascript
vue实现一拉到底的滑动验证
Jul 25 Javascript
ES6入门教程之Iterator与for...of循环详解
May 17 #Javascript
angular.fromJson与toJson方法用法示例
May 17 #Javascript
Node.js编写CLI的实例详解
May 17 #Javascript
ES6入门教程之Class和Module详解
May 17 #Javascript
AngularJS实现动态添加Option的方法
May 17 #Javascript
AngularJS+bootstrap实现动态选择商品功能示例
May 17 #Javascript
Vue声明式渲染详解
May 17 #Javascript
You might like
php存储过程调用实例代码
2013/02/03 PHP
PHP FTP操作类代码( 上传、拷贝、移动、删除文件/创建目录)
2014/05/10 PHP
Thinkphp结合ajaxFileUpload实现异步图片传输示例
2017/03/13 PHP
php实现微信支付之退款功能
2018/05/30 PHP
jQuery实战之仿淘宝商城左侧导航效果
2011/04/12 Javascript
Jquery遍历checkbox获取选中项value值的方法
2014/02/13 Javascript
javascript处理表单示例(javascript提交表单)
2014/04/28 Javascript
a标签的href与onclick事件的区别详解
2014/11/12 Javascript
可以浮动某个物体的jquery控件用法实例
2015/07/24 Javascript
Angularjs中的事件广播 —全面解析$broadcast,$emit,$on
2016/05/17 Javascript
nodejs开发——express路由与中间件
2017/03/24 NodeJs
vue-awesome-swiper滑块插件使用方法详解
2017/11/27 Javascript
Vue + better-scroll 实现移动端字母索引导航功能
2018/05/07 Javascript
webpack 从指定入口文件中提取公共文件的方法
2018/11/13 Javascript
vue实现购物车小案例
2019/09/27 Javascript
在Vue mounted方法中使用data变量详解
2019/11/05 Javascript
vue实现修改图片后实时更新
2019/11/14 Javascript
vue使用swiper实现中间大两边小的轮播图效果
2019/11/24 Javascript
[46:10]2014 DOTA2国际邀请赛中国区预选赛 CnB VS HGT
2014/05/21 DOTA
Python3.5 Pandas模块缺失值处理和层次索引实例详解
2019/04/23 Python
python绘制地震散点图
2019/06/18 Python
python将print输出的信息保留到日志文件中
2019/09/27 Python
Keras中的多分类损失函数用法categorical_crossentropy
2020/06/11 Python
python的launcher用法知识点总结
2020/08/07 Python
俄罗斯披萨、寿司和面食送货到家服务:2 Берега
2019/12/15 全球购物
介绍一下XMLHttpRequest对象
2012/02/12 面试题
教师求职推荐信范文
2013/11/20 职场文书
五年级音乐教学反思
2014/02/06 职场文书
安全标准化实施方案
2014/02/20 职场文书
经典洗发水广告词
2014/03/13 职场文书
感恩寄语大全
2014/04/11 职场文书
正科级干部考察材料
2014/05/29 职场文书
国际贸易毕业生自荐书
2014/06/22 职场文书
党员应该树立反腐倡廉的坚定意识思想汇报
2014/09/12 职场文书
庐山导游词
2015/02/03 职场文书
2016年社区六一儿童节活动总结
2016/04/06 职场文书