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 相关文章推荐
jquery ajax abort()的使用方法
Oct 28 Javascript
document.documentElement和document.body区别介绍
Sep 16 Javascript
js在输入框屏蔽按键,只能键入数字的示例代码
Jan 03 Javascript
javascript 3d 逐侦产品展示(核心精简)
Mar 26 Javascript
json中换行符的处理方法示例介绍
Jun 10 Javascript
不得不分享的JavaScript常用方法函数集(上)
Dec 23 Javascript
深入浅析JavaScript中with语句的理解
May 12 Javascript
jQuery实现的简单排序功能示例【冒泡排序】
Jan 13 Javascript
微信小程序 ES6Promise.all批量上传文件实现代码
Apr 14 Javascript
JavaScript中三个等号和两个等号你了解多少
Jul 04 Javascript
详解vue 不同环境配置不同的打包命令
Apr 07 Javascript
js实现手表表盘时钟与圆周运动
Sep 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
php中用于检测一个地理IP地址是否可用的代码
2012/02/19 PHP
利用php获取服务器时间的实现代码
2013/06/07 PHP
php实现贪吃蛇小游戏
2016/07/26 PHP
搜索附近的人PHP实现代码
2018/02/11 PHP
PHP基于pdo的数据库操作类【可支持mysql、sqlserver及oracle】
2018/05/21 PHP
php+ajax 文件上传代码实例
2019/03/18 PHP
基础的prototype.js常用函数及其用法
2007/03/10 Javascript
node.js中的fs.fstatSync方法使用说明
2014/12/15 Javascript
js实现两点之间画线的方法
2015/05/12 Javascript
nodejs爬虫抓取数据乱码问题总结
2015/07/03 NodeJs
HTML5 Shiv完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
2015/11/25 Javascript
深入学习AngularJS中数据的双向绑定机制
2016/03/04 Javascript
第一次接触神奇的Bootstrap基础排版
2016/07/26 Javascript
js简单获取表单中单选按钮值的方法
2016/08/23 Javascript
微信JSSDK调用微信扫一扫功能的方法
2017/07/25 Javascript
微信小程使用swiper组件实现图片轮播切换显示功能【附源码下载】
2017/12/12 Javascript
基于JS实现html中placeholder属性提示文字效果示例
2018/04/19 Javascript
微信小程序中添加客服按钮contact-button功能
2018/04/27 Javascript
ES6函数实现排它两种写法解析
2020/05/13 Javascript
vue中axios封装使用的完整教程
2021/03/03 Vue.js
python的三目运算符和not in运算符使用示例
2014/03/03 Python
在Python中处理时间之clock()方法的使用
2015/05/22 Python
Python 多线程实例详解
2017/03/25 Python
用xpath获取指定标签下的所有text的实例
2019/01/02 Python
Python中三元表达式的几种写法介绍
2019/03/04 Python
Flask-WTF表单的使用方法
2019/07/12 Python
利用python计算windows全盘文件md5值的脚本
2019/07/27 Python
Python任务调度利器之APScheduler详解
2020/04/02 Python
基于python代码批量处理图片resize
2020/06/04 Python
如何用python 操作zookeeper
2020/12/28 Python
关于老式浏览器兼容HTML5和CSS3的问题
2016/06/01 HTML / CSS
Oakley官网:运动太阳镜、雪镜和服装
2016/09/30 全球购物
运动会入场词
2015/07/18 职场文书
2015年教务处干事工作总结
2015/07/22 职场文书
八年级作文之友情
2019/11/25 职场文书
python 中的@运算符使用
2021/05/26 Python