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 相关文章推荐
一些mootools的学习资源
Feb 07 Javascript
jquery 追加tr和删除tr示例代码
Sep 12 Javascript
JS输入用户名自动显示邮箱后缀列表的方法
Jan 27 Javascript
js中split和replace的用法实例
Feb 28 Javascript
JS解析XML文件和XML字符串详解
Apr 17 Javascript
基于JS快速实现导航下拉菜单动画效果附源码下载
Oct 27 Javascript
JS实现简单的二元方程计算器功能示例
Jan 03 Javascript
js实现图片懒加载效果
Jul 17 Javascript
对vue中methods互相调用的方法详解
Aug 30 Javascript
vue路由中前进后退的一些事儿
May 18 Javascript
Vue登录主页动态背景短视频制作
Sep 21 Javascript
vue3引入highlight.js进行代码高亮的方法实例
Apr 08 Vue.js
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
关于PHP5 Session生命周期介绍
2010/03/02 PHP
PHP 类相关函数的使用详解
2013/05/10 PHP
destoon安全设置中需要设置可写权限的目录及文件
2014/06/21 PHP
PHP fopen函数用法实例讲解
2019/02/15 PHP
laravel http 自定义公共验证和响应的方法
2019/09/29 PHP
用CSS+JS实现的进度条效果效果
2007/06/05 Javascript
JavaScript中数组的排序、乱序和搜索实现代码
2011/11/30 Javascript
jsp js鼠标移动到指定区域显示选项卡离开时隐藏示例
2013/06/14 Javascript
Js冒泡事件详解及阻止示例
2014/03/21 Javascript
JavaScript实现的图像模糊算法代码分享
2014/04/22 Javascript
jquery+php实现滚动的数字特效
2015/11/29 Javascript
jquery mobile 实现自定义confirm确认框效果的简单实例
2016/06/17 Javascript
JS实现根据文件字节数返回文件大小的方法
2016/08/02 Javascript
轻松掌握JavaScript代理模式
2016/08/26 Javascript
WebView启动支付宝客户端支付失败的问题小结
2017/01/11 Javascript
解析Vue2.0双向绑定实现原理
2017/02/23 Javascript
JavaScript使用atan2来绘制箭头和曲线的实例
2017/09/14 Javascript
原生JavaScript实现Ajax异步请求
2017/11/19 Javascript
jQuery实现基本动画效果的方法详解
2018/09/06 jQuery
js实现全选和全不选功能
2020/07/28 Javascript
PyCharm设置SSH远程调试的方法
2018/07/17 Python
使用python opencv对目录下图片进行去重的方法
2019/01/12 Python
pytorch中torch.max和Tensor.view函数用法详解
2020/01/03 Python
基于Python计算圆周率pi代码实例
2020/03/25 Python
keras 解决加载lstm+crf模型出错的问题
2020/06/10 Python
Python+unittest+requests 接口自动化测试框架搭建教程
2020/10/09 Python
迪拜领先运动补剂零售品牌中文站:Sporter商城
2019/08/20 全球购物
电影T恤、80年代T恤和80年代服装:TV Store Online
2020/01/05 全球购物
意大利领先的奢侈品在线时装零售商:MCLABELS
2020/10/13 全球购物
在购买印度民族服饰:Soch
2020/09/15 全球购物
java程序员面试交流
2012/11/29 面试题
高二化学教学反思
2014/01/30 职场文书
3.15国际消费者权益日主题活动活动总结
2014/03/16 职场文书
优秀教师事迹材料
2014/12/15 职场文书
培训通知书模板
2015/04/17 职场文书
小学语文教师竞聘演讲稿范文
2019/08/09 职场文书