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 attachEvent传递参数的办法
Dec 14 Javascript
锋利的jQuery 第三章章节总结的例子
Mar 23 Javascript
datagrid框架的删除添加与修改
Apr 08 Javascript
页面使用密码保护代码
Apr 10 Javascript
node.js中的console.dir方法使用说明
Dec 10 Javascript
jQuery中html()方法用法实例
Dec 25 Javascript
js css+html实现简单的日历
Jul 14 Javascript
JavaScript组件开发之输入框加候选框
Mar 10 Javascript
Node.js创建Web、TCP服务器
Dec 05 Javascript
JavaScript学习总结(一) ECMAScript、BOM、DOM(核心、浏览器对象模型与文档对象模型)
Jan 07 Javascript
微信小程序 扭蛋抽奖机css3动画实现详解
Jul 19 Javascript
JS实现放烟花效果
Mar 10 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
Laravel中unique和exists验证规则的优化详解
2018/01/28 PHP
PHP实现分布式memcache设置web集群session同步的方法
2018/04/10 PHP
JS+CSS实现一个气泡提示框
2013/08/18 Javascript
javascript的渐进增强与平稳退化浅谈
2013/11/12 Javascript
js修改原型的属性使用介绍
2014/01/26 Javascript
jquery使用on绑定a标签无效 只能用live解决
2016/06/02 Javascript
JS读取XML文件数据并以table形式显示数据的方法(兼容IE与火狐)
2016/06/02 Javascript
Javascript 数组去重的方法(四种)详解及实例代码
2016/11/24 Javascript
jQuery插件FusionCharts绘制的3D饼状图效果实例【附demo源码下载】
2017/03/03 Javascript
jQuery实现table表格checkbox全选的方法分析
2018/07/04 jQuery
vue计算属性get和set用法示例
2019/02/08 Javascript
微信小程序实现pdf、word等格式文件上传的方法
2019/09/10 Javascript
vuex+axios+element-ui实现页面请求loading操作示例
2020/02/02 Javascript
Element Input输入框的使用方法
2020/07/26 Javascript
antd Select下拉菜单动态添加option里的内容操作
2020/11/02 Javascript
jupyter安装小结
2016/03/13 Python
Python用户推荐系统曼哈顿算法实现完整代码
2017/12/01 Python
python实现简单登陆系统
2018/10/18 Python
python将处理好的图像保存到指定目录下的方法
2019/01/10 Python
利用python计算windows全盘文件md5值的脚本
2019/07/27 Python
python3的url编码和解码,自定义gbk、utf-8的例子
2019/08/22 Python
python 队列基本定义与使用方法【初始化、赋值、判断等】
2019/10/24 Python
Python实现初始化不同的变量类型为空值
2020/06/02 Python
Python基于network模块制作电影人物关系图
2020/06/19 Python
使用PyCharm安装pytest及requests的问题
2020/07/31 Python
通过HTML5规范搞定i、em、b、strong元素的区别
2017/03/04 HTML / CSS
泰国汽车、火车和轮渡票预订网站:Bus Online Ticket
2017/09/09 全球购物
生日宴会答谢词
2014/01/09 职场文书
社团活动总结
2014/04/28 职场文书
单位委托书格式范本
2014/09/29 职场文书
八项规定整改方案
2014/10/01 职场文书
出售房屋协议书范本
2014/10/06 职场文书
党员民主生活会材料
2014/12/15 职场文书
2015年社区民政工作总结
2015/04/21 职场文书
汽车销售员工作总结
2015/08/12 职场文书
Redis高并发缓存架构性能优化
2022/05/15 Redis