async/await剖析

JavaScript是单线程的,为了避免同步阻塞可能会带来的一些负面影响,引入了异步非阻塞机制,而对于异步执行的解决方案从最早的回调函数,到ES6Promise对象以及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内置了执行器,关于这个例子的实现下边会详述。对比来看,asyncawait,比起*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 ThunkGenerator 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

async/await剖析的更多相关文章

  1. 探索c#之Async、Await剖析

    阅读目录: 基本介绍 基本原理剖析 内部实现剖析 重点注意的地方 总结 基本介绍 Async.Await是net4.x新增的异步编程方式,其目的是为了简化异步程序编写,和之前APM方式简单对比如下. ...

  2. C# 探索c#之Async、Await剖析

    探索c#之Async.Await剖析 作者:蘑菇先生 出处:http://mushroom.cnblogs.com/

  3. c#之Async、Await剖析

    c#之Async.Await剖析 探索c#之Async.Await剖析 2015-06-15 08:35 by 蘑菇先生, 1429 阅读, 5 评论, 收藏, 编辑 阅读目录: 基本介绍 基本原理剖 ...

  4. 聊聊多线程那一些事儿 之 五 async.await深度剖析

     hello task,咱们又见面啦!!是不是觉得很熟读的开场白,哈哈你哟这感觉那就对了,说明你已经阅读过了我总结的前面4篇关于task的文章,谢谢支持!感觉不熟悉的也没有关系,在文章末尾我会列出前四 ...

  5. [.NET] 利用 async & await 的异步编程

    利用 async & await 的异步编程 [博主]反骨仔 [出处]http://www.cnblogs.com/liqingwen/p/5922573.html  目录 异步编程的简介 异 ...

  6. [.NET] 怎样使用 async & await 一步步将同步代码转换为异步编程

    怎样使用 async & await 一步步将同步代码转换为异步编程 [博主]反骨仔 [出处]http://www.cnblogs.com/liqingwen/p/6079707.html  ...

  7. [.NET] 利用 async & await 进行异步 IO 操作

    利用 async & await 进行异步 IO 操作 [博主]反骨仔 [出处]http://www.cnblogs.com/liqingwen/p/6082673.html  序 上次,博主 ...

  8. [C#] 走进异步编程的世界 - 开始接触 async/await

    走进异步编程的世界 - 开始接触 async/await 序 这是学习异步编程的入门篇. 涉及 C# 5.0 引入的 async/await,但在控制台输出示例时经常会采用 C# 6.0 的 $&qu ...

  9. [C#] 走进异步编程的世界 - 开始接触 async/await(转)

    原文链接:http://www.cnblogs.com/liqingwen/p/5831951.html 走进异步编程的世界 - 开始接触 async/await 序 这是学习异步编程的入门篇. 涉及 ...

随机推荐

  1. idea创建maven项目慢的原因以及解决方案

    问题分析;在idea中maven项目所依赖的jar包,默认是从中央仓库直接下载jar包,不管jar包是否在本地仓库存在,所以导致idea创建maven项目速度慢,那么要解决这个问题,那么将idea设置 ...

  2. 对于使用progisp软件进行ISP编程时进入不了编程模式的解决方法

    标题: 对于使用progisp软件进行ISP编程时无法进入编程模式的解决方法 作者: 梦幻之心星 347369787@QQ.com 标签: [progisp, 软件] 目录: 软件 日期: 2019- ...

  3. 关于hexo中plugins博客配置对无法生成index.html文件的影响

    用hexo搭建的博客网站在访问时出现403错误,经调查后发现是public文件夹下的index.html文件丢失. 在csdn上搜了一下发现大家都是查看是否有一下hexo的插件未安装,将未安装插件安装 ...

  4. k-means聚类分析 python 代码实现(不使用现成聚类库)

    一.实验目标 1.使用 K-means 模型进行聚类,尝试使用不同的类别个数 K,并分析聚类结果. ​ 2.按照 8:2 的比例随机将数据划分为训练集和测试集,至少尝试 3 个不同的 K 值,并画出不 ...

  5. URL跳转与钓鱼

    从登录页跳转到另一个页面就叫做URL跳转. 1.URL跳转 URL跳转一般分为两种,(1)客户端跳转:(2)服务端跳转.对用户来说,两种跳转都是透明的,都是指向或者跳转到另一个页面,页面发生了改变.但 ...

  6. display有哪些值?说明他们的作用?

    inline(默认)— 内联 none — 隐藏 block — 显示.块级元素(单独占一行) inline-block — 行内块元素(不占整行) table — 表格显示 list-item — ...

  7. eclipse中的Invalid text string (xxx).

    这个是说明在eclipse中引用HTML的时候,语法出现了不规范的错误 可以到https://www.w3school.com.cn/index.html里面找找对应对象的问题 我之前就是option ...

  8. Java实现 LeetCode 309 最佳买卖股票时机含冷冻期

    309. 最佳买卖股票时机含冷冻期 给定一个整数数组,其中第 i 个元素代表了第 i 天的股票价格 .​ 设计一个算法计算出最大利润.在满足以下约束条件下,你可以尽可能地完成更多的交易(多次买卖一支股 ...

  9. Java实现 蓝桥杯VIP 算法提高 色盲的民主

    算法提高 色盲的民主 时间限制:1.0s 内存限制:256.0MB  色盲的民主 问题描述 n个色盲聚在一起,讨论一块布的颜色.尽管都是色盲,却盲得各不相同.每个人都有自己的主张,争论不休.最终,他 ...

  10. Linux 文件特殊权限-SetGID

    SUID只针对二进制可执行文件,而SGID可以针对二进制文件,这时它和SUID非常类似,命令执行在执行程序的时候,组身份变换为该文件的属组,最常见的locate命令,普通用户也可以搜索文件目录,它也可 ...