JavaScript体验异步更好的解决办法


Posted in Javascript onJanuary 08, 2018

一、异步解决方案的进化史
JavaScript的异步操作一直是个麻烦事,所以不断有人提出它的各种解决方案。可以追溯到最早的回调函数(ajax老朋友),到Promise(不算新的朋友),再到ES6的Generator(强劲的朋友)。
几年前我们可能用过一个比较著名的Async.js,但是它没有摆脱回调函数,并且错误处理也是按照“回调函数的第一个参数用来传递错误”这样一个约定。而众所周知的回调地狱仍然是一个比较突出的问题,直到Generator改变了这种异步风格。
但是ES7的async await的出现(碉堡的新朋友),我们可以轻松写出同步风格的代码同时又拥有异步机制,可以说是目前最简单,最优雅,最佳的解决方案了。

二、async await语法
async await语法比较简单,可以认为是Generator的语法糖,比起星号和yield更具有语义化。下面一个简单的例子表示1秒之后输出hello world:

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

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

await后面跟的是一个Promise对象(当然其它值也可以,但是会包装成一个立即resolve的Promise,也就没有意义了)

await会等待Promise的结果返回再继续执行

await等待的虽然是Promise对象,但是不必写.then(),直接可以得到返回值,将上面的代码微调,发现返回值result也是可以输出hello world:

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

三、async await错误处理

前面说了await等待的虽然是Promise对象,但是不必写.then(),所以其实也不用写.catch()了,直接用try catch就能捕捉错误,这样可以避免错误处理代码非常冗余和笨重,还是将上面的例子微调:

function timeout(ms) {
 return new Promise((resolve, reject) => {
  setTimeout(_ => {reject('error')}, ms);//reject模拟出错,返回error
 });
}
async function asyncPrint(ms) {
 try {
   console.log('start');
   await timeout(ms);//这里返回了错误
   console.log('end');//所以这句代码不会被执行了
 } catch(err) {
   console.log(err); //这里捕捉到错误error
 }
}
asyncPrint(1000);

如果有多个await,可以一起放在try catch中:

async function main() {
 try {
  const async1 = await firstAsync();
  const async2 = await secondAsync();
  const async3 = await thirdAsync();
 }
 catch (err) {
  console.error(err);
 }
}

四、async await注意点

1). 前面已经说过,await命令后面的Promise对象,运行结果很可能是reject或逻辑报错,所以最好把await放在try catch代码块中。

2). 多个await命令的异步操作,如果不存在依赖关系,让它们同时触发。

const async1 = await firstAsync();
const async2 = await secondAsync();

上面代码中,async1和async2如果是两个独立的异步操作,这样写会比较耗时,因为只有firstAsync完成以后,才会执行secondAsync,完全可以用Promise.all优雅地处理:

let [async1, async2] = await Promise.all([firstAsync(), secondAsync()]);

3). await只能用在async函数之中,如果用在普通函数就会报错:

async function main() {
 let docs = [{}, {}, {}];
 //报错 await is only valid in async function
 docs.forEach(function (doc) {
  await post(doc);
  console.log('main');
 });
}
function post(){
 return new Promise((resolve) => {
  setTimeout(resolve, 1000);
 });
}

在forEach内部方法加上async就可以了:

async function main() {
 let docs = [{}, {}, {}];
 docs.forEach(async function (doc) {
  await post(doc);
  console.log('main');
 });
}
function post(){
 return new Promise((resolve) => {
  setTimeout(resolve, 1000);
 });
}

但是你会发现3个main是同时输出的,这就说明post是并发执行的,而不是继发执行,改成for就可以解决问题,3个main是分别相隔1秒输出:

async function main() {
 let docs = [{}, {}, {}];
 for (let doc of docs) {
  await post(doc);
  console.log('main');
 }
}
function post(){
 return new Promise((resolve) => {
  setTimeout(resolve, 1000);
 });
}

总之,用了async await之后整个人神清气爽,可以用非常简洁和优雅的代码实现各种花式异步操作,并且在业务逻辑复杂的情况下可以不用陷入回调地狱中。不敢说这一定是终极的解决方案,但确实是目前最优雅的解决方案!

Javascript 相关文章推荐
javascript判断chrome浏览器的方法
Mar 26 Javascript
JavaScript中的lastIndexOf()方法使用详解
Jun 06 Javascript
全面解析Bootstrap表单使用方法(表单控件状态)
Nov 24 Javascript
基于js实现微信发送好友如何分享到朋友圈、微博
Nov 30 Javascript
jQuery点击其他地方时菜单消失的实现方法
Apr 22 Javascript
深入理解ECMAScript的几个关键语句
Jun 01 Javascript
微信JSSDK调用微信扫一扫功能的方法
Jul 25 Javascript
Angular2+国际化方案(ngx-translate)的示例代码
Aug 23 Javascript
详解Angular操作cookies方法
Jun 01 Javascript
解决Layui中templet中a的onclick参数传递的问题
Sep 20 Javascript
解决layer.confirm快速点击会重复触发事件的问题
Sep 23 Javascript
vue实现整屏滚动切换
Jun 29 Javascript
探索Vue高阶组件的使用
Jan 08 #Javascript
Vue入门之数据绑定(小结)
Jan 08 #Javascript
浅谈Vue数据绑定的原理
Jan 08 #Javascript
让网站自动生成章节目录索引的多个js代码
Jan 07 #Javascript
JavaScript学习总结(一) ECMAScript、BOM、DOM(核心、浏览器对象模型与文档对象模型)
Jan 07 #Javascript
Bootstrap treeview实现动态加载数据并添加快捷搜索功能
Jan 07 #Javascript
vue实现登录后页面跳转到之前页面
Jan 07 #Javascript
You might like
tp5框架无刷新分页实现方法分析
2019/09/26 PHP
又一个图片自动缩小的JS代码
2007/03/10 Javascript
List all the Databases on a SQL Server
2007/06/21 Javascript
js中如何把字符串转化为对象、数组示例代码
2013/07/17 Javascript
jquery ui dialog实现弹窗特效的思路及代码
2013/08/03 Javascript
解析页面加载与js函数的执行 onload or ready
2013/12/12 Javascript
JS原型链 详解及示例代码
2016/09/06 Javascript
深入理解react-router@4.0 使用和源码解析
2017/05/23 Javascript
jQuery模拟爆炸倒计时功能实例代码
2017/08/21 jQuery
jQuery读取本地的json文件(实例讲解)
2017/10/31 jQuery
用vue2.0实现点击选中active其他选项互斥的效果
2018/04/12 Javascript
微信小程序实现用table显示数据库反馈的多条数据功能示例
2019/05/07 Javascript
vue路由中前进后退的一些事儿
2019/05/18 Javascript
简单了解JavaScript异步
2019/05/23 Javascript
[28:07]完美世界DOTA2联赛PWL S3 Phoenix vs INK ICE 第二场 12.13
2020/12/17 DOTA
python计算程序开始到程序结束的运行时间和程序运行的CPU时间
2013/11/28 Python
基于python解线性矩阵方程(numpy中的matrix类)
2019/10/21 Python
Python实现捕获异常发生的文件和具体行数
2020/04/25 Python
解决Python Matplotlib绘图数据点位置错乱问题
2020/05/16 Python
基于Python中random.sample()的替代方案
2020/05/23 Python
python如何实现读取并显示图片(不需要图形界面)
2020/07/08 Python
降低python版本的操作方法
2020/09/11 Python
美国女孩服装购物网站:Justice
2017/03/04 全球购物
澳大利亚领先的在线美容商城:Adore Beauty
2017/04/14 全球购物
雷朋巴西官方商店:Ray-Ban Brasil
2020/07/21 全球购物
土木工程应届生求职信
2013/10/31 职场文书
考核评语大全
2014/04/29 职场文书
社区活动总结报告
2014/05/05 职场文书
班主任与学生安全责任书
2014/07/25 职场文书
党员个人对照检查材料思想汇报
2014/09/16 职场文书
酒店管理专业毕业生自我鉴定
2014/09/29 职场文书
夫妻双方自愿离婚协议书
2014/10/24 职场文书
学生上课迟到检讨书
2015/01/01 职场文书
全国法制宣传日活动总结
2015/05/05 职场文书
暂住证证明
2015/06/19 职场文书
导游词之海南天涯海角
2019/12/05 职场文书