怎麼處理async/await浪費效能問題

這次帶給大家怎麼處理async/await浪費效能問題，處理async/await浪費效能問題的注意事項有哪些，下面就是實戰案例，一起來看一下。

前言

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 地獄

在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
}

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

React怎样在react-router路由实现登陆验证控制

Angular路由内路由守卫该如何使用

以上是怎麼處理async/await浪費效能問題的詳細內容。更多資訊請關注PHP中文網其他相關文章！