关于ES7里面的async和await
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));
注意点:
- async用来申明里面包裹的内容可以进行同步的方式执行,await则是进行执行顺序控制,每次执行一个await,程序都会暂停等待await返回值,然后再执行之后的await。
- await后面调用的函数需要返回一个promise,另外这个函数是一个普通的函数即可,而不是generator。
- await只能用在async函数之中,用在普通函数中会报错。
- await命令后面的 Promise 对象,运行结果可能是 rejected,所以最好把 await 命令放在 try...catch 代码块中。
其实,async / await的用法和co差不多,await和yield都是表示暂停,外面包裹一层async 或者 co来表示里面的代码可以采用同步的方式进行处理。不过async / await里面的await后面跟着的函数不需要额外处理,co是需要将它写成一个generator的。
(原文地址:https://www.cnblogs.com/cpselvis/p/6344122.html)
关于ES7里面的async和await的更多相关文章
- 在Node中使用ES7新特征——async、await
async与await两个关键字是在ES7中添加的新特征,旨在更加直观的书写异步函数,避免出现callback hell. callback hell是什么? readFileContents(&qu ...
- ES7中的async和await
ES7中的async和await 在上一章中,使用Promise将原本的回调方式转换为链式操作,这就将一个个异步执行的操作串在一条同步线上了.下一次的操作必须等待当前操作的结束. 使用Promise的 ...
- ES7中的async 和 await
async 和 await 一个函数如果加上 async ,那么该函数就会返回一个 Promise async function test() { return "1" } con ...
- C#里的async和await的使用
1. await指令调起线程执行异步方法和方法内后面的代码 2. await指令会阻塞当前方法后面的代码,但是不会阻塞外部调用 3. await必须搭配async使用,而async不一定需要有awai ...
- Async和Await异步编程的原理
1. 简介 从4.0版本开始.NET引入并行编程库,用户能够通过这个库快捷的开发并行计算和并行任务处理的程序.在4.5版本中.NET又引入了Async和Await两个新的关键字,在语言层面对并行编程给 ...
- promise, async和await
最开始实现异步的方法:回调函数 method1(function(err, result) { if (err) { throw err; } method2(function(err, result ...
- 理解ES7中的async/await
理解ES7中的async/await 优势是:就是解决多层异步回调的嵌套 从字面上理解 async/await, async是 "异步"的含义,await可以认为是 async w ...
- 小结:ES7——async和await初识
一.async async其实是ES7才有有的关键字,async的意思是异步,顾名思义是有关异步的操作 async用于声明一个函数是异步的. 通常情况下async.await都是跟随promise一起 ...
- ES7中前端异步特性:async、await。
在最新的ES7(ES2017)中提出的前端异步特性:async.await. 什么是async.await? async顾名思义是"异步"的意思,async用于声明一个函数是异步的 ...
随机推荐
- js 实现全国省市区三级联动
效果: index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /& ...
- Windows环境安装Elasticsearch
安装前提: 确保电脑已经安装了JDK,要求在1.8以上,并且安装目录不能包括空格 下载 下载地址:https://www.elastic.co/cn/downloads/elasticsearch 选 ...
- 基础篇:3.2)规范化:3d零件建模
本章目的:规范化零件建模,这是机械的基本功夫. 1.建模的总体原则和总体要求 1.1 建模总体原则 a)零件模型应能准确表达零件的设计信息:b)零件模型包含零件的几何要素.约束要素和工程要素:c)零件 ...
- Vue项目中用的Jquery.js和easing.js做的抛物线
如果项目中还用到自有的$ <script> jQuery.noConflict();</script> //星星掉落movePathNew(args) { let self = ...
- 二分--POJ-3258
POJ-3258,二分 题目 Description Every year the cows hold an event featuring a peculiar version of hopscot ...
- python 元类以及练习
''' # 知识储备exec() # 参数1:字符串形式的命令 # 参数2:全局作用域(字典形式),如果不指定默认就使用globals() # 参数3:局部作用域(字典形式),如果不指定默认就使用lo ...
- PIE SDK矢量点生成等值线、面
1.算法功能简介 等值线图能直观地展示数据的变化趋势,是众多领域展示成果的重要图建之一,被广泛应用于石油勘探.矿物开采.气象预报等众多领域.等值线的绘制是指从大量采样数据中提取出具有相同值的点的信息, ...
- vue,新手上路,基础,常见问题
1. 报这个错的 都是关键字问题,不要用关键字 做为组件的名字,不然肯定都会报错,如果找不到就一个字母的看,我就是 忘记改组件的名字导致报错,这个问题 改个名字就好,切记改全不然只有页面报错,文 ...
- excel表计算和计算器计算结果不一致
excel表计算和计算器计算结果不一致 : 建议安装完excel进行精度设置:
- oracle 中关于null的操作
空值 空值一般用NULL表示 一般表示未知的.不确定的值,也不是空格 一般运算符与其进行运算时,都会为空 空不与任何值相等 表示某个列为空用:IS NULL 不能使用COMM=NULL这种形式 某个 ...