Async Await

接着上一篇Generator co的使用 https://juejin.im/post/5ab51336f265da239d493ff4
这里继续说说js异步处理的方法 async await( 即Generator的语法糖)

async 是“异步”的简写,async 用于申明一个 function 是异步的,而 await 用于等待一个异步方法执行完成,await 只能出现在 async 函数中

同样用上一篇中读取文件的例子,这里改写为

let bluebird = require('bluebird');
let fs = require('fs');
let read = bluebird.promisify(fs.readFile);
//await 命令后面的 Promise 对象,运行结果可能是 //rejected,所以最好把 await 命令放在 try...catch 代码块中。async function r(){try{let content1 = await read('1.txt','utf8');let content2 = await read(content1,'utf8');return content2;}catch(e){ console.log('err',e)}
}r().then(function(data){console.log('data',data);
},function(err){console.log('err1',err);
})

async await和generator的写法很像,就是将 Generator 函数的星号(*)替换成 async,将 yield 替换成await

但async 函数对 Generator 函数做了改进:

1、内置执行器:Generator函数的执行必须靠执行器,所以才有了 co 函数库,而 async 函数自带执行器.也就是说,async 函数的执行,与普通函数一模一样。

2、更好的语义:async 和 await,比起星号和 yield,语义更清楚了。async 表示函数里有异步操作,await 表示紧跟在后面的表达式需要等待结果。

3、更广的适用性: co 函数库约定,yield 命令后面只能是 Thunk 函数或 Promise 对象,而 async 函数的 await 命令后面,可以跟 Promise 对象和原始类型的值(数值、字符串和布尔值,但这时等同于同步操作)

async 函数是非常新的语法功能,新到都不属于 ES6,而是属于 ES7。目前,它仍处于提案阶段,但是转码器 Babel 和 regenerator 都已经支持,转码后就能使用。

async 的作用

async 函数负责返回一个 Promise 对象
如果在async函数中 return 一个直接量,async 会把这个直接量通过Promise.resolve() 封装成 Promise 对象;
如果 async 函数没有返回值,它会返回 Promise.resolve(undefined)

await 在等待什么

一般我们都用await去等带一个async函数完成,不过按语法说明,await 等待的是一个表达式,这个表达式的计算结果是 Promise 对象或者其它值,所以,await后面实际可以接收普通函数调用或者直接量

如果await等到的不是一个promise对象,那跟着的表达式的运算结果就是它等到的东西;
如果是一个promise对象,await会阻塞后面的代码,等promise对象resolve,得到resolve的值作为await表达式的运算结果
虽然await阻塞了,但await在async中,async不会阻塞,它内部所有的阻塞都被封装在一个promise对象中异步执行

Async Await使用场景

如上面的例子,当需要用到promise链式调用的时候,就体现出Async Await的优势;

假设一个业务需要分步完成,每个步骤都是异步的,而且依赖上一步的执行结果,甚至依赖之前每一步的结果,就可以使用Async Await来完成

function takeLongTime(n) {return new Promise(resolve => {setTimeout(() => resolve(n   200), n);});
}
function step1(n) {console.log(`step1 with ${n}`);return takeLongTime(n);
}
function step2(m, n) {console.log(`step2 with ${m} and ${n}`);return takeLongTime(m   n);
}
function step3(k, m, n) {console.log(`step3 with ${k}, ${m} and ${n}`);return takeLongTime(k   m   n);
}async function doIt() {console.time("doIt");const time1 = 300;const time2 = await step1(time1);const time3 = await step2(time1, time2);const result = await step3(time1, time2, time3);console.log(`result is ${result}`);console.timeEnd("doIt");
}doIt();

如果用promise来实现

function doIt() {console.time("doIt");const time1 = 300;step1(time1).then(time2 => {return step2(time1, time2).then(time3 => [time1, time2, time3]);}).then(times => {const [time1, time2, time3] = times;return step3(time1, time2, time3);}).then(result => {console.log(`result is ${result}`);console.timeEnd("doIt");});
}doIt();

可见用promise,参数传递非常麻烦

下面的例子,指定多少毫秒后输出一个值。

function timeout(ms) {return new Promise((resolve) => {setTimeout(resolve, ms);});
}async function asyncPrint(value, ms) {await timeout(ms);console.log(value)
}asyncPrint('hello world', 50);

注意

await 命令后面的 Promise 对象,运行结果可能是 rejected,所以最好把 await 命令放在 try...catch 代码块中,或者await后的Promise添加catch回调

await read('1.txt','utf8').catch(function(err){console.log(err);
})

await 只能出现在 async 函数中,如果用在普通函数,就会报错

async function dbFuc(db) {let docs = [{}, {}, {}];// 报错docs.forEach(function (doc) {await db.post(doc);});
}

上面代码会报错,因为 await 用在普通函数之中了。但是,如果将 forEach 方法的参数改成 async 函数,也有问题

async function dbFuc(db) {let docs = [{}, {}, {}];// 可能得到错误结果docs.forEach(async function (doc) {await db.post(doc);});
}

上面代码可能不会正常工作,原因是这时三个 db.post 操作将是并发执行,也就是同时执行,而不是继发执行。正确的写法是采用 for 循环。

async function dbFuc(db) {let docs = [{}, {}, {}];for (let doc of docs) {await db.post(doc);}
}

如果确实希望多个请求并发执行,可以使用 Promise.all 方法。

async function dbFuc(db) {let docs = [{}, {}, {}];let promises = docs.map((doc) => db.post(doc));let results = await Promise.all(promises);console.log(results);
}// 或者使用下面的写法async function dbFuc(db) {let docs = [{}, {}, {}];let promises = docs.map((doc) => db.post(doc));let results = [];for (let promise of promises) {results.push(await promise);}console.log(results);
}

总结

使用 async / await, 搭配 promise, 可以通过编写形似同步的代码来处理异步流程, 提高代码的简洁性和可读性。

Async Await 的优点: 1、解决了回调地狱的问题
2、支持并发执行
3、可以添加返回值 return xxx;
4、可以在代码中添加try/catch捕获错误

参考资料
1、https://segmentfault.com/a/1190000007535316

2、http://www.ruanyifeng.com/blog/2015/05/async.html


更多专业前端知识,请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/366681.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java对象到对象映射器

我在该项目上使用了Dozer一段时间。 但是,最近我遇到了一个非常有趣的错误,它促使我环顾四周,并尝试使用其他“对象到对象”映射器。 这是我找到的工具列表: 推土机:推土机是Java Bean到Java Bean的映射器&#xff…

android媒体播放框架,Android 使用超简单的多媒体播放器JiaoZiVideoPlayer

在之前的项目中用到了视频播放的功能,在网上看了看使用了大家用的比较多的一个开源项目JiaoZiVideo可以迅速的实现视频播放的相关功能。JiaoZiVideo的简单使用集成了JiaoZiVideo后仅需这几行代码就可以实现播放视频JZVideoPlayerStandard jzVideoPlayerStandard (J…

送福利:ROKID 语音开发板免费送,开启你的物联网之旅

都让一让,我说个事情:掘金联合 Rokid 开发者社区给大家发福利啦! 掘金联合 Rokid 开发者社区为大家准备了一些福利,只要秀出你的 skill 和技术栈,就有可能获得 Rokid 全栈语音智能开发套件。 ? Rokid开箱试用活动 活…

点击复制文本

点击按钮,进行文本复制操作。实现这个功能需要二点; 一:用window.getSelection().selectAllChildren(“”)获取要复制的内容 二:用document.execCommand ("Copy");进行复制操作 关键代码 window.getSelection().selec…

6.25

TEXT 94 Cancer biology 肿瘤生物学 Cramping tumours 断了肿瘤的活路(陈继龙编译) Jan 18th 2007 From The Economist print edition An old observation about cancer cells may lead to a new treatment 早年发现的肿瘤细胞的一个特征可能为治疗肿瘤打…

Java Lambdas简介

Java 8的主题是lambdas。 我已经注意到,对于许多Java程序员来说,lambda都是非常难的材料。 因此,让我们尝试对它们有一个基本的了解。 首先,lambda到底是什么? Lambda是一个匿名函数,与常规函数不同&#…

ios html清除缓存图片,iOS,如何清理缓存的图片

通常,在我们加载图片的时候,一般都会做缓存处理,像SDWebImage,YYWebImage都是有的,但是有缓存,当然也需要清理缓存,如果没有这个功能的话,显得app太没人性化。获取总的缓存大小// 获取某个路径下…

搭建一个项目的前期准备

后端:node(驱动) mogodb(数据库) express(node框架) mongoose(快速建模工具) moment.js(时间和日期格式化) jade(模板引擎)前端: jquery(类库) bootstrsop(样式框架) bower(npm模块)本地环境:less cssmin jshint uglifyjs mocha …

ZOJ1081 Points Within

在解析几何中,我们大量的使用列方程求解未知量。但是在计算机计算的时候,解析几何的算法因为使用除法过多可能会带来严重的精度误差,所以简单来说,计算几何使用了一些其他的等效的方法来解决这些问题。 这里先说一个比较基础的题目…

如何使用JavaScript控制台改进工作流程

作为Web开发人员,很有必要了解如何调试代码。后台开发我们经常使用外部库来记录日志,并在某些情况下格式化显示日志,前端我们会使用断点和控制台,但是我们浏览器的控制台比我们想象的要强大得多。 当我们考虑控制台时&#xff0c…

如何在OpenJDK中使用ECC

曾经试图在Java和OpenJDK中使用椭圆曲线密码术 (ECC)的每个人要么被迫使用Bouncy Castle,要么被SunEC提供者弄糊涂了 。 SunEC提供程序根据文档 (报价)提供以下算法: AlgorithmParameters 欧共体 KeyAgr…

html 文本框数量加减,收藏!js实现input加减

好的程序员是会复制粘贴的,这样说好像会被唾弃的。。。。。html减号按钮点击事件function subtraction(){//获取-号按钮var subtraction document.getElementById("subtraction");//获取文本框var number document.getElementById("number");…

select、poll、epoll之间的区别总结[整理]

原文:https://www.cnblogs.com/Anker/p/3265058.html 好文章收藏下,慢慢品味 select,poll,epoll都是IO多路复用的机制。I/O多路复用就通过一种机制,可以监视多个描述符,一旦某个描述符就绪(一般是读就绪或者…

JPA(七):映射关联关系------映射双向多对一的关联关系

映射双向多对一的关联关系 修改Customer.java package com.dx.jpa.singlemanytoone;import java.util.Date; import java.util.HashSet; import java.util.Set;import javax.persistence.CascadeType; import javax.persistence.Column; import javax.persistence.Entity; impo…

如何优雅的绘制一棵省市区三级可选择的树?

开始 总结一下 开发过程中的思路想法 各位大佬们看看就好 首先你拥有的数据结构 所有省市区的信息列表 以及已经选中的信息 用的是element-ui的 el-tree const cityStorage {provinceList:[{id: 1, provinceId: "110000", name: "北京市"}],//所有省ci…

html click事件 参数,vue 实现click同时传入事件对象和自定义参数

这篇文章主要介绍了vue 实现click同时传入事件对象和自定义参数,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧仅仅传入自定义参数HTMLdddddJS代码new Vue({el:#app,methods:{tm:function(e){console.log(e);}}})仅仅传入事件对象HTML…

向SAML响应中添加自定义声明–(如何为WSO2 Identity Server编写自定义声明处理程序)...

总览 最新版本的WSO2 Identity Server(版本5.0.0)配备了“应用程序身份验证框架”,该框架提供了很大的灵活性,可以对来自使用异构协议的各种服务提供商的用户进行身份验证。 它具有多个扩展点,可用于满足企业系统中常见…

Android学习(七)—— Android布局

Android布局 1、LinearLayout 线性布局,这种布局在平时的开发中用的最多,内部控件只能水平或竖直进行排列,在搭建较复杂的界面时会有点麻烦。 常用属性 android:orientation 控制控件排列方向,属性值为垂直(vertical…

不一样的ZTree,权限树.js插件

每一个有趣的创新,都源于苦逼的生活。在最近的工作中,遇到一个做权限管理筛选的需求。 简单总结需求: 1展示一个组织中的组织结构 2通过点击组织结构中的任意一个节点可以向上向下查询对应的组织结构 如果你不想苦逼的重复劳动,还…

No goals have been specified for this build.

解决办法&#xff0c;在pom.xml添加如下配置&#xff1a; <build><defaultGoal>compile</defaultGoal> </build> 转载于:https://www.cnblogs.com/penghq/p/9233655.html