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实现页面打印的三种方法
Mar 05 Javascript
图片无缝滚动代码(向左/向下/向上)
Apr 10 Javascript
深入理解Javascript作用域与变量提升
Dec 09 Javascript
JavaScript表格常用操作方法汇总
Apr 15 Javascript
JavaScript类型系统之布尔Boolean类型详解
Jun 26 Javascript
js放大镜放大购物图片效果
Jan 18 Javascript
js实现日历的简单算法
Jan 24 Javascript
简单谈谈关于 npm 5.0 的新坑
Jun 08 Javascript
vue页面使用阿里oss上传功能的实例(一)
Aug 09 Javascript
vue路由组件按需加载的几种方法小结
Jul 12 Javascript
Angular刷新当前页面的实现方法
Nov 21 Javascript
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
Jan 09 jQuery
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
php strstr查找字符串中是否包含某些字符的查找函数
2010/06/03 PHP
兼容性比较好的PHP生成缩略图的代码
2011/01/12 PHP
PHP数组操作类实例
2015/07/11 PHP
php如何连接sql server
2015/10/16 PHP
php实现smarty模板无限极分类的方法
2015/12/07 PHP
PHP cookie,session的使用与用户自动登录功能实现方法分析
2019/06/05 PHP
JavaScript DOM学习第八章 表单错误提示
2010/02/19 Javascript
解析javascript系统错误:-1072896658的解决办法
2013/07/08 Javascript
JavaScript实现打字效果的方法
2015/07/10 Javascript
jQuery实现列表内容的动态载入特效
2015/08/08 Javascript
JS模仿编辑器实时改变文本框宽度和高度大小的方法
2015/08/17 Javascript
解决angular的post请求后SpringMVC后台接收不到参数值问题的方法
2015/12/10 Javascript
详解PHP后期静态绑定分析与应用
2018/03/21 Javascript
Node.js事件的正确使用方法
2019/04/05 Javascript
vue 进阶之实现父子组件间的传值
2019/04/26 Javascript
关于vue组件事件属性穿透详解
2019/10/28 Javascript
详解vuejs中执行npm run dev出现页面cannot GET/问题
2020/04/26 Javascript
vue+Element中table表格实现可编辑(select下拉框)
2020/05/21 Javascript
Vue(定时器)解决mounted不能获取到data中的数据问题
2020/07/30 Javascript
js实现页面导航层级指示效果
2020/08/25 Javascript
Python程序员开发中常犯的10个错误
2014/07/07 Python
python 输出上个月的月末日期实例
2018/04/11 Python
python+excel接口自动化获取token并作为请求参数进行传参操作
2020/11/10 Python
Python实现FTP文件定时自动下载的步骤
2020/12/19 Python
西班牙伏林航空公司:Vueling
2016/08/05 全球购物
DELPHI面试题研发笔试试卷
2015/11/08 面试题
专科毕业生自我鉴定
2013/12/01 职场文书
绿色城市实施方案
2014/03/19 职场文书
婚假请假条怎么写
2014/04/10 职场文书
篮球比赛拉拉队口号
2014/06/10 职场文书
2014新生大学四年计划书
2014/09/21 职场文书
2014广电局实施党的群众路线教育实践活动方案思想汇报
2014/09/22 职场文书
计划生育工作汇报
2014/10/28 职场文书
2015年重阳节主持词
2015/07/04 职场文书
关于CentOS 8 搭建MongoDB4.4分片集群的问题
2021/10/24 MongoDB
Python+OpenCV实现图片中的圆形检测
2022/04/07 Python