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 表格排序和表头浮动效果(扩展SortTable)
Apr 07 Javascript
javascript 闭包
Sep 15 Javascript
基于JavaScript自定义构造函数的详解说明
Apr 24 Javascript
JS 实现导航栏悬停效果(续2)
Sep 24 Javascript
jquery组件使用中遇到的问题整理及解决
Feb 21 Javascript
javascript ajax的5种状态介绍
Aug 18 Javascript
浅谈使用MVC模式进行JavaScript程序开发
Nov 10 Javascript
纯JS单页面赛车游戏制作代码分享
Mar 03 Javascript
几种响应式文字详解
May 19 Javascript
20行JS代码实现网页刮刮乐效果
Jun 23 Javascript
AngularJS发送异步Get/Post请求方法
Aug 13 Javascript
Vue中使用Lodop插件实现打印功能的简单方法
Dec 19 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
海河写的 Discuz论坛帖子调用js的php代码
2007/08/23 PHP
php中配置文件操作 如config.php文件的读取修改等操作
2012/07/07 PHP
调试WordPress中定时任务的相关PHP脚本示例
2015/12/10 PHP
PHP框架自动加载类文件原理详解
2017/06/06 PHP
Prototype 1.5.0_rc1 及 Prototype 1.5.0 Pre0小抄本
2006/09/22 Javascript
在JavaScript中监听IME键盘输入事件
2011/05/29 Javascript
jquery全选/全不选/反选另一种实现方法(配合原生js)
2013/04/07 Javascript
JavaScript更改原始对象valueOf的方法
2015/03/19 Javascript
jQuery幻灯片带缩略图轮播效果代码分享
2015/08/17 Javascript
属于你的jQuery提示框(Tip)插件
2016/01/20 Javascript
详解JavaScript的内置对象
2016/12/07 Javascript
详解Angular的数据显示优化处理
2016/12/26 Javascript
jquery 实现复选框的全选操作实例代码
2017/01/24 Javascript
js仿淘宝评价评分功能
2017/02/28 Javascript
如何在 Vue.js 中使用第三方js库
2017/04/25 Javascript
BootStrap表单验证 FormValidation 调整反馈图标位置的实例代码
2017/05/17 Javascript
原生js实现针对Dom节点的CRUD操作示例
2019/08/26 Javascript
Python实现批量下载图片的方法
2015/07/08 Python
在Python的Flask框架中验证注册用户的Email的方法
2015/09/02 Python
pandas 两列时间相减换算为秒的方法
2018/04/20 Python
python科学计算之narray对象用法
2019/11/25 Python
python离线安装外部依赖包的实现
2020/02/13 Python
python3中sorted函数里cmp参数改变详解
2020/03/12 Python
Python tkinter界面实现历史天气查询的示例代码
2020/08/23 Python
佳能德国网上商店:Canon德国
2017/03/18 全球购物
锐步美国官方网站:Reebok美国
2018/01/10 全球购物
到底Java是如何传递参数的?是by value或by reference?
2012/07/13 面试题
高中数学教师求职信
2013/10/30 职场文书
中学生爱国演讲稿
2013/12/31 职场文书
新品发布会策划方案
2014/06/08 职场文书
小学教师暑期培训方案
2014/08/28 职场文书
2014年旅游局法制宣传日活动总结
2014/11/01 职场文书
九不准学习心得体会
2016/01/23 职场文书
2016年乡镇七一建党节活动总结
2016/04/05 职场文书
穷人该怎么创业?谨记以下几点
2019/07/11 职场文书
MySQL pt-slave-restart工具的使用简介
2021/04/07 MySQL