简评：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

}

如何避免 async/await 地狱的更多相关文章

  1. js中promise解决callback回调地狱以及使用async+await异步处理的方法

    1.callback回调地狱 function ajax(fn) { setTimeout(()=> { console.log('你好') fn() }, 1000) } ajax(() =& ...

  2. Promise,async/await解决回调地狱

    先说一下async的用法,它作为一个关键字放到函数前面,用于表示函数是一个异步函数,因为async就是异步的意思, 异步函数也就意味着该函数的执行不会阻塞后面代码的执行. 写一个async 函数 as ...

  3. [微信小程序] 终于可以愉快的使用 async/await 啦

    [小程序] 终于可以愉快的使用 async/await 啦 这篇文章主要是想说一下 怎么在微信小程序中使用async/await从而逃离回调地狱 背景 最近一直在搞微信小程序 用的语言是TypeScr ...

  4. Javascript中的async await

    async / await是Javascript是ES7的重要特性之一,也是目前社区里公认的优秀异步解决方案.目前,async / await这个特性已经是stage 3的建议,可以看看TC39的进度 ...

  5. async/await与promise（nodejs中的异步操作问题）

    此文只是粗略介绍使用方法,欲了解核心概念请参考官方文档或其他资料. 举例写文章详情页面的时候的一个场景:首先更改文章详情中的 PV,然后读取文章详情,然后根据文章详情中文章 Id 查阅该文章评论和该文 ...

  6. Async/Await替代Promise的6个理由

    译者按: Node.js的异步编程方式有效提高了应用性能:然而回调地狱却让人望而生畏,Promise让我们告别回调函数,写出更优雅的异步代码:在实践过程中,却发现Promise并不完美:技术进步是无止 ...

  7. async/await，了解一下？

    上一篇博客我们在现实使用和面试角度讲解了Promise(原文可参考<面向面试题和实际使用谈promise>),但是Promise 的方式虽然解决了 callback hell,但是这种方式 ...

  8. promise async await使用

    1.Promise (名字含义:promise为承诺,表示其他手段无法改变) Promise 对象代表一个异步操作,其不受外界影响,有三种状态: Pending(进行中.未完成的) Resolved( ...

  9. Async/Await 学习与示例

    参考:Async/await学习 es 7 提供了对 promise 对象的更好的操作,省去了很多丧心病狂的链式异步请求,promise 是回调地狱的福音,而 Async/Await 则是 promi ...

随机推荐

  1. freemarker判断对象是否为空

    freemarker中显示某对象使用 ${name}.   但如果name为null,freemarker就会报错.如果需要判断对象是否为空: <#if name??> …… </# ...

  2. html/CSS基础知识回顾

    html部分 块级元素: 一般用来搭建网站架构,布局,装载内容...像这些大体力的活都属于块级元素.它包括以下标签: address,blockquote,center,dir, div, dl, d ...

  3. 最新的windows xp sp3序列号(绝对可通过正版验证)

    MRX3F-47B9T-2487J-KWKMF-RPWBY(工行版) 可用(强推此号) QC986-27D34-6M3TY-JJXP9-TBGMD(台湾交大学生版) 可用 CM3HY-26VYW-6J ...

  4. Android Studio 学习 - 程序安装

    痛定思痛,从今天开始专心学习AndriodStudio.希望以此为契机,把Java学扎实.更希望自己能坚持下去,不要半途而废. 记录一些日常的工作以及碰到的问题,权当勉励自己.荀子曰:吾尝终日而思矣, ...

  5. MongoDB 复制集 (一) 成员介绍

       一 MongoDB 复制集简介          MongoDB的复制机制主要分为两种:          Master-Slave    (主从复制)      这个已经不建议使用       ...

  6. C#.NET利用ContextBoundObject和Attribute实现AOP技术--AOP事务实现例子

    我前两天看见同事用写了用AOP技术实现缓存的方案,于是好奇看了一下这是怎么实现的.原来是用了.NET中的一个类ContextBoundObject和Attribute相关技术.其实个类在.NET Fr ...

  7. hdu 1011 Starship Troopers_树状dp

    题目链接 题意:给你一棵树(必须从根节点出发),每个节点上都有bug和value,你有m个骑士,每个骑士能消灭20个bug,你必须消灭该节点的全部bug才能拿到该节点的value,问最多能拿到valu ...

  8. selenium webdriver缺陷

    关闭  selenium webdriver缺陷 除了http://573301735.com/?p=5126讲 的,昨天又发现一个让我1个小时生不如死的问题,就是使用两个不同的配置文件来初始化dri ...

  9. GUI Design Studio——如何创建项目展示文件

    打开一个做好的项目,我这次以系统自带的  welcome项目做示例 选择左上角的File->Create Distribution File... 我需要的是整个项目,所以选择了The whol ...

  10. datatable 参数详细说明

    页面参数说明 var docrTable = $('#docrevisontable').dataTable({ language:lang, //提示信息 autoWidth: false, //禁 ...