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 相关文章推荐
JS预览图像将本地图片显示到浏览器上
Aug 25 Javascript
javascript页面上使用动态时间具体实现
Mar 18 Javascript
超级简单的jquery操作表格方法
Dec 15 Javascript
JavaScript获取各大浏览器信息图示
Nov 20 Javascript
jquery判断复选框选中状态以及区分attr和prop
Dec 18 Javascript
原生JS实现图片懒加载(lazyload)实例
Jun 13 Javascript
Three.js如何实现雾化效果示例代码
Sep 27 Javascript
bootstrap-table.js扩展分页工具栏(增加跳转到xx页)功能
Dec 28 Javascript
Vue 配合eiement动态路由,权限验证的方法
Sep 26 Javascript
react脚手架如何配置less和ant按需加载的方法步骤
Nov 28 Javascript
关于JS解构的5种有趣用法
Sep 05 Javascript
vue中watch和computed的区别与使用方法
Aug 23 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
dede3.1分页文字采集过滤规则详说(图文教程)续四
2007/04/03 PHP
在PHP中利用wsdl创建标准webservice的实现代码
2011/12/07 PHP
一致性哈希算法以及其PHP实现详细解析
2013/08/24 PHP
php中数字0和空值的区别分析
2014/06/05 PHP
PHP 将dataurl转成图片image方法总结
2016/10/14 PHP
php7安装mongoDB扩展的方法分析
2017/08/02 PHP
用js生产批量批处理执行命令
2008/07/28 Javascript
JS前端加密算法示例
2016/12/22 Javascript
MUI  Scroll插件的使用详解
2017/04/13 Javascript
详解Node.js串行化流程控制
2017/05/04 Javascript
AngularJS使用拦截器实现的loading功能完整实例
2017/05/17 Javascript
Angular.JS中select下拉框设置value的方法
2017/06/20 Javascript
解决vue router使用 history 模式刷新后404问题
2017/07/19 Javascript
vue中如何使用ztree
2018/02/06 Javascript
JS三级联动代码格式实例详解
2019/12/30 Javascript
js前端传json后台接收‘‘被转为quot的问题解决
2020/11/12 Javascript
[00:03]DOTA2新版本PA至宝展示
2014/11/19 DOTA
Django跨域请求问题的解决方法示例
2018/06/16 Python
Python对象转换为json的方法步骤
2019/04/25 Python
python 一篇文章搞懂装饰器所有用法(建议收藏)
2019/08/23 Python
python科学计算之narray对象用法
2019/11/25 Python
Python读取表格类型文件代码实例
2020/02/17 Python
CSS改变网页中鼠标选中文字背景颜色例子
2014/04/23 HTML / CSS
韩国现代百货官网:Hmall
2018/03/21 全球购物
世界上最受欢迎的钓鱼诱饵:Rapala
2019/05/02 全球购物
理财投资建议书
2014/03/12 职场文书
班主任新年寄语
2014/04/04 职场文书
大学毕业生管理学求职信
2014/09/01 职场文书
企业承诺书格式范文
2015/04/28 职场文书
工作感言一句话
2015/08/01 职场文书
公司晚宴祝酒词
2015/08/11 职场文书
如何计划开一家便利店?
2019/07/31 职场文书
Python爬虫数据的分类及json数据使用小结
2021/03/29 Python
Kubernetes控制节点的部署
2022/04/01 Servers
Elasticsearch 聚合查询和排序
2022/04/19 Python
Mysql将字符串按照指定字符分割的正确方法
2022/05/30 MySQL