async/await剖析
async/await剖析
JavaScript
是单线程的,为了避免同步阻塞可能会带来的一些负面影响,引入了异步非阻塞机制,而对于异步执行的解决方案从最早的回调函数,到ES6
的Promise
对象以及Generator
函数,每次都有所改进,但是却又美中不足,他们都有额外的复杂性,都需要理解抽象的底层运行机制,直到在ES7
中引入了async/await
,他可以简化使用多个Promise
时的同步行为,在编程的时候甚至都不需要关心这个操作是否为异步操作。
分析
首先使用async/await
执行一组异步操作,并不需要回调嵌套也不需要写多个then
方法,在使用上甚至觉得这本身就是一个同步操作,当然在正式使用上应该将await
语句放置于 try...catch
代码块中,因为await
命令后面的Promise
对象,运行结果可能是rejected
。
function promise(){
return new Promise((resolve, reject) => {
var rand = Math.random() * 2;
setTimeout(() => resolve(rand), 1000);
});
}
async function asyncFunct(){
var r1 = await promise();
console.log(1, r1);
var r2 = await promise();
console.log(2, r2);
var r3 = await promise();
console.log(3, r3);
}
asyncFunct();
async/await
实际上是Generator
函数的语法糖,如Promises
类似于结构化回调,async/await
在实现上结合了Generator
函数与Promise
函数,下面使用Generator
函数加Thunk
函数的形式实现一个与上边相同的例子,可以看到只是将async
替换成了*
放置在函数右端,并将await
替换成了yield
,所以说async/await
实际上是Generator
函数的语法糖,此处唯一不同的地方在于实现了一个流程的自动管理函数run
,而async/await
内置了执行器,关于这个例子的实现下边会详述。对比来看,async
和await
,比起*
和yield
,语义更清楚,async
表示函数里有异步操作,await
表示紧跟在后面的表达式需要等待结果。
function thunkFunct(index){
return function f(funct){
var rand = Math.random() * 2;
setTimeout(() => funct(rand), 1000)
}
}
function* generator(){
var r1 = yield thunkFunct();
console.log(1, r1);
var r2 = yield thunkFunct();
console.log(2, r2);
var r3 = yield thunkFunct();
console.log(3, r3);
}
function run(generator){
var g = generator();
var next = function(data){
var res = g.next(data);
if(res.done) return ;
// console.log(res.value);
res.value(next);
}
next();
}
run(generator);
实现
async
函数内置了执行器,能够实现函数执行的自动流程管理,通过Generator yield Thunk
、Generator yield Promise
实现一个自动流程管理,只需要编写Generator
函数以及Thunk
函数或者Promise
对象并传入自执行函数,就可以实现类似于async/await
的效果。
Generator yield Thunk
自动流程管理run
函数,首先需要知道在调用next()
方法时,如果传入了参数,那么这个参数会传给上一条执行的yield
语句左边的变量,在这个函数中,第一次执行next
时并未传递参数,而且在第一个yield
上边也并不存在接收变量的语句,无需传递参数,接下来就是判断是否执行完这个生成器函数,在这里并没有执行完,那么将自定义的next
函数传入res.value
中,这里需要注意res.value
是一个函数,可以在下边的例子中将注释的那一行执行,然后就可以看到这个值是f(funct){...}
,此时我们将自定义的next
函数传递后,就将next
的执行权限交予了f
这个函数,在这个函数执行完异步任务后,会执行回调函数,在这个回调函数中会触发生成器的下一个next
方法,并且这个next
方法是传递了参数的,上文提到传入参数后会将其传递给上一条执行的yield
语句左边的变量,那么在这一次执行中会将这个参数值传递给r1
,然后在继续执行next
,不断往复,直到生成器函数结束运行,这样就实现了流程的自动管理。
function thunkFunct(index){
return function f(funct){
var rand = Math.random() * 2;
setTimeout(() => funct(rand), 1000)
}
}
function* generator(){
var r1 = yield thunkFunct();
console.log(1, r1);
var r2 = yield thunkFunct();
console.log(2, r2);
var r3 = yield thunkFunct();
console.log(3, r3);
}
function run(generator){
var g = generator();
var next = function(data){
var res = g.next(data);
if(res.done) return ;
// console.log(res.value);
res.value(next);
}
next();
}
run(generator);
Generator yield Promise
相对于使用Thunk
函数来做流程自动管理,使用Promise
来实现相对更加简单,Promise
实例能够知道上一次回调什么时候执行,通过then
方法启动下一个yield
,不断继续执行,这样就实现了流程的自动管理。
function promise(){
return new Promise((resolve,reject) => {
var rand = Math.random() * 2;
setTimeout( () => resolve(rand), 1000);
})
}
function* generator(){
var r1 = yield promise();
console.log(1, r1);
var r2 = yield promise();
console.log(2, r2);
var r3 = yield promise();
console.log(3, r3);
}
function run(generator){
var g = generator();
var next = function(data){
var res = g.next(data);
if(res.done) return ;
res.value.then(data => next(data));
}
next();
}
run(generator);
// 比较完整的流程自动管理函数
function promise(){
return new Promise((resolve,reject) => {
var rand = Math.random() * 2;
setTimeout( () => resolve(rand), 1000);
})
}
function* generator(){
var r1 = yield promise();
console.log(1, r1);
var r2 = yield promise();
console.log(2, r2);
var r3 = yield promise();
console.log(3, r3);
}
function run(generator){
return new Promise((resolve, reject) => {
var g = generator();
var next = function(data){
var res = null;
try{
res = g.next(data);
}catch(e){
return reject(e);
}
if(!res) return reject(null);
if(res.done) return resolve(res.value);
Promise.resolve(res.value).then(data => {
next(data);
},(e) => {
throw new Error(e);
});
}
next();
})
}
run(generator).then( () => {
console.log("Finish");
});
每日一题
https://github.com/WindrunnerMax/EveryDay
参考
https://segmentfault.com/a/1190000007535316
http://www.ruanyifeng.com/blog/2015/05/co.html
http://www.ruanyifeng.com/blog/2015/05/async.html
- javascript Object与Array用法
- vue class与style 绑定详解——小白速会
- java8-Stream之数值流
- POJ 3694 Network(Tarjan求割边+LCA)
- java之Cookie详解
- Ajax详解
- 1611: [Usaco2008 Feb]Meteor Shower流星雨
- 3893: [Usaco2014 Dec]Cow Jog
- 3892: [Usaco2014 Dec]Marathon
- BZOJ 2793: [Poi2012]Vouchers(调和级数)
- 3891: [Usaco2014 Dec]Piggy Back
- Java8-如何构建一个Stream
- 2016: [Usaco2010]Chocolate Eating
- javascript 闭包详解
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- LeetCode精选好题(五)
- 【leetcode两题选手】MySQL类题目(一)
- 【LeetCode每日一题】(8.11)被围绕的区域
- 二叉树的前中后序遍历(迭代法)(带动画)
- 【LeetCode两题选手】算法类题目(8.8)
- 【LeetCode每日一题】(8.9)复原IP地址(回溯)
- 【回溯算法】N叉树相关技巧
- 【回溯算法】回溯,从入门到入土,七道试题精选、精讲、精练
- 数据结构练手小项目(AVL树、哈希表、循环链表、MySQL数据库)
- 【LeetCode】每日一题(8.2)二叉树展开为链表
- 【小技巧】argc和argv的用法
- 全面分析redis持久化机制
- 【奇技淫巧】-- 接雨水
- 【奇技淫巧】-- 最长连续序列
- 【redis】跟我一起动手玩玩redis主从复制和哨兵模式