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 相关文章推荐
容易被忽略的JS脚本特性
Sep 13 Javascript
jQuery中click事件的定义和用法
Dec 20 Javascript
需要牢记的JavaScript基础知识
Sep 25 Javascript
js微信扫描二维码登录网站技术原理
Dec 01 Javascript
js实现自动图片轮播代码
Mar 22 Javascript
AngularJS改变元素显示状态
Apr 20 Javascript
XMLHttpRequest对象_Ajax异步请求重点(推荐)
Sep 28 Javascript
Angular实现类似博客评论的递归显示及获取回复评论的数据
Nov 06 Javascript
Node.js readline 逐行读取、写入文件内容的示例
Mar 01 Javascript
JS前端知识点总结之页面加载事件,数组操作,DOM节点操作,循环和分支
Jul 04 Javascript
element-ui中el-upload多文件一次性上传的实现
Dec 02 Javascript
Js实现粘贴上传图片的原理及示例
Dec 09 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 allow_url_include的应用和解释
2010/04/22 PHP
[原创]php逐行读取txt文件写入数组的方法
2015/07/02 PHP
PHP中常见的缓存技术实例分析
2015/09/23 PHP
PHP微信开发之查询城市天气
2016/06/23 PHP
PHP中PCRE正则解析代码详解
2019/04/26 PHP
Laravel框架中集成MongoDB和使用详解
2019/10/17 PHP
来自qq的javascript面试题
2010/07/24 Javascript
js中关于一个分号的崩溃示例
2013/11/11 Javascript
jquery自动填充勾选框即把勾选框打上true
2014/03/24 Javascript
javascript中的括号()用法小结
2014/04/14 Javascript
学习JavaScript设计模式(单例模式)
2015/11/26 Javascript
深入理解jQuery layui分页控件的使用
2016/08/17 Javascript
Javascript Function.prototype.bind详细分析
2016/12/29 Javascript
详解Angular 中 ngOnInit 和 constructor 使用场景
2017/06/22 Javascript
jquery单击文字或图片内容放大并居中显示
2017/06/23 jQuery
实例详解JavaScript中setTimeout函数的执行顺序
2017/07/12 Javascript
浅谈vue项目重构技术要点和总结
2018/01/23 Javascript
vue-router 源码实现前端路由的两种方式
2018/07/02 Javascript
详解Vue中数组和对象更改后视图不刷新的问题
2018/09/21 Javascript
es6函数之箭头函数用法实例详解
2020/04/25 Javascript
python数据结构之二叉树的建立实例
2014/04/29 Python
浅析python打包工具distutils、setuptools
2018/04/20 Python
解决python打不开文件(文件不存在)的问题
2019/02/18 Python
利用Pycharm + Django搭建一个简单Python Web项目的步骤
2020/10/22 Python
python元组拆包实现方法
2021/02/28 Python
一款利用css3的鼠标经过动画显示详情特效的实例教程
2014/12/29 HTML / CSS
简单html5代码获取地理位置
2014/03/31 HTML / CSS
个人总结与自我评价
2014/09/18 职场文书
2014教师年度思想工作总结
2014/11/10 职场文书
2014年创先争优工作总结
2014/12/11 职场文书
长城的导游词
2015/01/30 职场文书
婚育证明格式
2015/06/17 职场文书
创业计划书之寿司
2019/07/19 职场文书
基于python实现银行管理系统
2021/04/20 Python
golang在GRPC中设置client的超时时间
2021/04/27 Golang
开机音效回归! Windows 11重新引入开机铃声
2021/11/21 数码科技