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 相关文章推荐
Jquery 返回json数据在IE浏览器中提示下载的问题
May 18 Javascript
JS实现动态给图片添加边框的方法
Apr 01 Javascript
javascript执行环境及作用域详解
May 05 Javascript
动态加载css方法实现和深入解析
Jan 18 Javascript
详解Angular.js指令中scope类型的几种特殊情况
Feb 21 Javascript
Vue 2.0的数据依赖实现原理代码简析
Jul 10 Javascript
JS删除数组里的某个元素方法
Feb 03 Javascript
详解在Vue中使用TypeScript的一些思考(实践)
Jul 06 Javascript
一个因@click.stop引发的bug的解决
Jan 08 Javascript
angular4中引入echarts的方法示例
Jan 29 Javascript
使用Angular自定义字段校验指令的方法示例
Feb 01 Javascript
uni app仿微信顶部导航条功能
Sep 17 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
PHP操作数组相关函数
2011/02/03 PHP
关于PHP内存溢出问题的解决方法
2013/06/25 PHP
thinkphp实现发送邮件密码找回功能实例
2014/12/01 PHP
php文件读取方法实例分析
2015/06/20 PHP
laravel 解决groupBy时出现的错误 isn't in Group By问题
2019/10/17 PHP
TBCompressor js代码压缩
2011/01/05 Javascript
javascript对数组的常用操作代码 数组方法总汇
2011/01/27 Javascript
简单的前端js+ajax 购物车框架(入门篇)
2011/10/29 Javascript
jQuery 阴影插件代码分享
2012/01/09 Javascript
js获取class的所有元素
2013/03/28 Javascript
JS动态获取当前时间,并写到特定的区域
2013/05/03 Javascript
jquery鼠标滑过提示title具体实现代码
2013/08/06 Javascript
JavaScript在for循环中绑定事件解决事件参数不同的情况
2014/01/20 Javascript
jQuery对象与DOM对象之间的相互转换
2015/03/03 Javascript
JavaScript检查弹出窗口是否被阻拦的方法技巧
2015/03/13 Javascript
原生js和jQuery实现淡入淡出轮播效果
2015/12/25 Javascript
详解jQuery中的deferred对象的使用(一)
2016/05/27 Javascript
Bootstrap实现弹性搜索框
2016/07/11 Javascript
遍历json 对象的属性并且动态添加属性的实现
2016/12/02 Javascript
深入理解JavaScript 参数按值传递
2017/05/24 Javascript
ZeroClipboard.js使用一个flash复制多个文本框
2017/06/19 Javascript
Vue 莹石摄像头直播视频实例代码
2018/08/31 Javascript
小程序实现左滑删除功能
2018/10/30 Javascript
JavaScript代码调试方法实例小结
2019/01/05 Javascript
vue封装swiper代码实例解析
2019/10/08 Javascript
使用python检测手机QQ在线状态的脚本代码
2013/02/10 Python
Python从零开始创建区块链
2018/03/06 Python
Python学习笔记之列表和成员运算符及列表相关方法详解
2019/08/22 Python
Numpy 中的矩阵求逆实例
2019/08/26 Python
tensorflow入门:TFRecordDataset变长数据的batch读取详解
2020/01/20 Python
SpringBoot实现登录注册常见问题解决方案
2020/03/04 Python
我的中国梦演讲稿初中篇
2014/08/19 职场文书
小学师德师风整改措施
2014/10/27 职场文书
2015关于重阳节的演讲稿
2015/03/20 职场文书
幼儿园综治宣传月活动总结
2015/05/07 职场文书
一文搞懂Golang 时间和日期相关函数
2021/12/06 Golang