async/await地狱该如何避免详解


Posted in Javascript onMay 10, 2018

前言

async/await是什么

async/await可以说是co模块和生成器函数的语法糖。用更加清晰的语义解决js异步代码。

熟悉co模块的同学应该都知道,co模块是TJ大神写的一个使用生成器函数来解决异步流程的模块,可以看做是生成器函数的执行器。而async/await则是对co模块的升级,内置生成器函数的执行器,不再依赖co模块。同时,async返回的是Promise。

从上面来看,不管是co模块还是async/await,都是将Promise作为最基础的单元,对Promise不很了解的同学可以先深入了解一下Promise。

async/await 写着很爽,不过要注意这些问题。

async/await 让我们摆脱了回调地狱,但是这又引入了 async/await 地狱的问题。

async/await地狱该如何避免详解

什么是 async/await 地狱

在 Javascript 中进行异步编程的时候,人们总是使用很多 await 语句,很多时候我们的语句并不需要依赖于之前的语句,这样就会导致性能问题。

async/await 地狱的例子

我们试着写一个购买披萨和饮料的程序:

(async () => {
 const pizzaData = await getPizzaData() // async call
 const drinkData = await getDrinkData() // async call
 const chosenPizza = choosePizza() // sync call
 const chosenDrink = chooseDrink() // sync call
 await addPizzaToCart(chosenPizza) // async call
 await addDrinkToCart(chosenDrink) // async call
 orderItems() // async call
})()

这段代码运行没有问题。但是不是一个好的实现,因为这增加了不必要的等待。

说明

我们已经将我们的代码封装在异步 IIFE 中,按照下面的顺序执行:

得到披萨名单
获取饮料列表
从列表中选择一个披萨
从列表中选择一种饮料
将选中的披萨加入购物车
将选择的饮品加入购物车
订购购物车中的物品

问题

这里有个问题为什么从列表中选择披萨这个动作要等待获取饮料列表?这两个是没什么关联的操作。其中的关联操作有两组:

获取披萨列表 -》 选择披萨 -》 选择披萨加入购物车

获取饮料列表 -》 选择饮料 -》 选择饮料加入购物车

这两组操作应该是并发执行的。

再来看一个更差的例子

这个 Javascript 代码片段将购物车中的商品并发出订购请求。

async function orderItems() {
 const items = await getCartItems() // async call
 const noOfItems = items.length
 for(var i = 0; i < noOfItems; i++) {
 await sendRequest(items[i]) // async call
 }
}

这种情况 for 循环必须等待 sendRequest() 函数完成才能继续下一次迭代。但是,我们并不需要等待。我们希望尽快发送所有请求。然后我们可以等待所有请求完成。

现在你应该已经对 async/await 地狱有跟多的了解,现在我们再来考虑一个问题

如果我们忘记 await 关键字会怎么样?

如果在调用异步函数忘记使用 await,这意味着执行该功能不需要等待。异步函数将直接返回一个 promise,你可以稍后使用。

(async () => {
 const value = doSomeAsyncTask()
 console.log(value) // an unresolved promise
})()

或者是程序不清楚你想要等待函数执行完,直接退出不会完成这个异步任务。所以我们需要使用 await 这个关键字。

promise 有一个有趣的属性,你可以在某行代码中获取 promise,然后在其他地方中等待它 resolve,这是解决 async/await 地狱的关键。

(async () => {
 const promise = doSomeAsyncTask()
 const value = await promise
 console.log(value) // the actual value
})()

如你所见 doSomeAsyncTask 直接返回一个 Promise 同时这个异步函数 doSomeAsyncTask 已经开始执行,为了得到 doSomeAsyncTask 的返回值,我们需要 await 来告诉

应该如何避免 async/await 地狱

首先我们需要知道哪些命名是有前后依赖关系的。

然后将有依赖关系的系列操作进行分组合并成一个异步操作。

同时执行这些异步函数。

我们来重写这写例子:

async function selectPizza() {
 const pizzaData = await getPizzaData() // async call
 const chosenPizza = choosePizza() // sync call
 await addPizzaToCart(chosenPizza) // async call
}

async function selectDrink() {
 const drinkData = await getDrinkData() // async call
 const chosenDrink = chooseDrink() // sync call
 await addDrinkToCart(chosenDrink) // async call
}

(async () => {
 const pizzaPromise = selectPizza()
 const drinkPromise = selectDrink()
 await pizzaPromise
 await drinkPromise
 orderItems() // async call
})()

// Although I prefer it this way

(async () => {
 Promise.all([selectPizza(), selectDrink()].then(orderItems) // async call
})()

我们将语句分成两个函数。在函数内部,每个语句都依赖于前一个语句的执行。然后我们同时执行这两个函数 selectPizza()和selectDrink() 。

在第二个例子中我们需要处理未知数量的 Promise。处理这个问题非常简单,我们只需要创建一个数组将所有 Promise 存入其中,使用 Promise.all() 方法并行执行:

async function orderItems() {
 const items = await getCartItems() // async call
 const noOfItems = items.length
 const promises = []
 for(var i = 0; i < noOfItems; i++) {
 const orderPromise = sendRequest(items[i]) // async call
 promises.push(orderPromise) // sync call
 }
 await Promise.all(promises) // async call
}

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
JavaScript 自动完成脚本整理(33个)
Oct 20 Javascript
jquery 可拖拽的窗体控件实现代码
Mar 21 Javascript
jQuery拖拽 &amp; 弹出层 介绍与示例
Dec 27 Javascript
jQuery实现的多屏图像图层切换效果实例
May 07 Javascript
javascript删除元素节点removeChild()用法实例
May 26 Javascript
jQuery hover事件简单实现同时绑定2个方法
Jun 07 Javascript
jQuery Easyui Datagrid实现单行的上移下移及保存移动的结果
Aug 15 Javascript
JavaScript中this的四个绑定规则总结
Sep 26 Javascript
一个极为简单的requirejs实现方法
Oct 20 Javascript
浅谈webpack打包之后的文件过大的解决方法
Mar 07 Javascript
react-native 圆弧拖动进度条实现的示例代码
Apr 12 Javascript
微信小程序自定义底部弹出框功能
Nov 18 Javascript
Angular4.x通过路由守卫进行路由重定向实现根据条件跳转到相应的页面(推荐)
May 10 #Javascript
JS中的JSON对象的定义和取值实现代码
May 09 #Javascript
js循环map 获取所有的key和value的实现代码(json)
May 09 #Javascript
js合并两个数组生成合并后的key:value数组
May 09 #Javascript
详解Puppeteer 入门教程
May 09 #Javascript
node基于puppeteer模拟登录抓取页面的实现
May 09 #Javascript
nuxt框架中路由鉴权之Koa和Session的用法
May 09 #Javascript
You might like
显示youtube视频缩略图和Vimeo视频缩略图代码分享
2014/02/13 PHP
值得分享的php+ajax实时聊天室
2016/07/20 PHP
PHP 记录访客的浏览信息方法
2018/01/29 PHP
php微信公众号开发之快递查询
2018/10/20 PHP
php的单例模式及应用场景详解
2021/02/27 PHP
javascript实现的listview效果
2007/04/28 Javascript
40个新鲜出炉的jQuery 插件和免费教程[上]
2012/07/24 Javascript
Js中setTimeout()和setInterval() 何时被调用执行的用法
2013/04/12 Javascript
微信小程序左滑删除效果的实现代码
2017/02/20 Javascript
jquery实现图片上传前本地预览
2017/04/28 jQuery
angular bootstrap timepicker TypeError提示怎么办
2017/06/13 Javascript
layer弹出层全屏及关闭方法
2018/08/17 Javascript
Vue动态修改网页标题的方法及遇到问题
2019/06/09 Javascript
vue实现绑定事件的方法实例代码详解
2019/06/20 Javascript
node.js中npm包管理工具用法分析
2020/02/14 Javascript
[04:28]2014DOTA2国际邀请赛 采访小兔子LGD挺进钥匙体育馆
2014/07/14 DOTA
[49:11]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第二场 12.20
2020/12/23 DOTA
python判断一个集合是否包含了另外一个集合中所有项的方法
2015/06/30 Python
python使用mysql数据库示例代码
2017/05/21 Python
Python装饰器原理与用法分析
2018/04/30 Python
Numpy截取指定范围内的数据方法
2018/11/14 Python
详解Python3中ceil()函数用法
2019/02/19 Python
Python 批量刷博客园访问量脚本过程解析
2019/08/30 Python
Python 实现大整数乘法算法的示例代码
2019/09/17 Python
基于python实现文件加密功能
2020/01/06 Python
Python 开发工具PyCharm安装教程图文详解(新手必看)
2020/02/28 Python
关于Python 中的时间处理包datetime和arrow的方法详解
2020/03/19 Python
详解python内置模块urllib
2020/09/09 Python
用HTML5的canvas实现一个炫酷时钟效果
2016/05/20 HTML / CSS
技术总监岗位职责
2013/12/05 职场文书
汽车维修专业自荐书
2014/05/26 职场文书
飞屋环游记观后感
2015/06/08 职场文书
干部考核工作总结2015
2015/07/24 职场文书
遗嘱范文
2015/08/07 职场文书
参加招聘会后的感想
2015/08/10 职场文书
正确的理解和使用Django信号(Signals)
2021/04/14 Python