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 Archive Network 集合
May 12 Javascript
两个Javascript小tip资料
Nov 23 Javascript
javascript中parentNode,childNodes,children的应用详解
Dec 17 Javascript
jquery用data方法获取某个元素上的事件
Jun 23 Javascript
完美兼容各大浏览器的jQuery仿新浪图文淡入淡出间歇滚动特效
Nov 12 Javascript
JS实现iframe编辑器光标位置插入内容的方法(兼容IE和Firefox)
Jun 24 Javascript
浅谈js继承的实现及公有、私有、静态方法的书写
Oct 28 Javascript
jQuery实现的无缝广告图片左右滚动功能详解
Dec 24 Javascript
JavaScript表单验证完美代码
Mar 02 Javascript
jquery+css3实现熊猫tv导航代码分享
Feb 12 jQuery
vue中使用iview自定义验证关键词输入框问题及解决方法
Mar 26 Javascript
了解JavaScript中let语句
May 30 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
无线电广播与收音机发展的历史回眸
2021/03/02 无线电
php中strtotime函数用法详解
2014/11/15 PHP
PHP实现CSV文件的导入和导出类
2015/03/24 PHP
编写PHP脚本清除WordPress头部冗余代码的方法讲解
2016/03/01 PHP
PHP转换文本框内容为HTML格式的方法
2016/07/20 PHP
ThinkPHP5实现作业管理系统中处理学生未交作业与已交作业信息的方法
2016/11/12 PHP
Zend Framework前端控制器用法示例
2016/12/11 PHP
PHP区块查询实现方法分析
2018/05/12 PHP
PHP时间处理类操作示例
2018/09/05 PHP
PHP静态方法和静态属性及常量属性的区别与介绍
2019/03/22 PHP
载入进度条 效果
2006/07/08 Javascript
javascript之可拖动的iframe效果代码
2008/08/01 Javascript
JavaScript:new 一个函数和直接调用函数的区别分析
2013/07/10 Javascript
javascript 判断字符串是否包含某字符串及indexOf使用示例
2013/10/18 Javascript
通过pjax实现无刷新翻页(兼容新版jquery)
2014/01/31 Javascript
javascript创建对象的3种方法
2016/11/02 Javascript
js与jquery分别实现tab标签页功能的方法
2016/11/18 Javascript
vue.js的提示组件
2017/03/02 Javascript
用 js 的 selection range 操作选择区域内容和图片
2017/04/18 Javascript
详解vue+css3做交互特效的方法
2017/11/20 Javascript
记一次用ts+vuecli4重构项目的实现
2020/05/21 Javascript
[01:02:05]LGD vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python获取linux主机ip的简单实现方法
2016/04/18 Python
Python 图像处理: 生成二维高斯分布蒙版的实例
2019/07/04 Python
Tensorflow 自定义loss的情况下初始化部分变量方式
2020/01/06 Python
Python实现密钥密码(加解密)实例详解
2020/04/26 Python
印度领先的在线时尚商店:Koovs
2016/08/28 全球购物
Kendra Scott官网:美国领先的时尚配饰品牌
2020/10/22 全球购物
Marlies Dekkers内衣荷兰官方网店:荷兰奢侈内衣品牌
2020/03/27 全球购物
数控专业大学生的自我鉴定
2013/11/13 职场文书
英文推荐信格式范文
2014/05/09 职场文书
公司外出活动方案
2014/08/14 职场文书
十佳家长事迹材料
2014/08/26 职场文书
工作态度不端正检讨书
2014/10/04 职场文书
Python 机器学习工具包SKlearn的安装与使用
2021/05/14 Python
深入理解CSS 中 transform matrix矩阵变换问题
2021/08/30 HTML / CSS