javascript異步_JavaScript異步并在循環中等待

javascript異步

Basic async and await is simple. Things get a bit more complicated when you try to use await in loops.

基本的async和await很簡單。當您嘗試在循環中使用await時，事情會變得更加復雜。

In this article, I want to share some gotchas to watch out for if you intend to use await in loops.

在本文中，我想分享一些陷阱，以防您打算在循環中使用await 。

在你開始之前 (Before you begin)

I'm going to assume you know how to use async and await. If you don't, read the previous article to familiarize yourself before continuing.

我將假設您知道如何使用async和await 。如果不是這樣，請先閱讀上一篇文章以熟悉一下自己，然后再繼續。

準備一個例子 (Preparing an example)

For this article, let's say you want to get the number of fruits from a fruit basket.

對于本文，假設您要從水果籃中獲取水果的數量。

const fruitBasket = {apple: 27,grape: 0,pear: 14
};

You want to get the number of each fruit from the fruitBasket. To get the number of a fruit, you can use a getNumFruit function.

您想從fruitBasket中獲取每個水果的數量。要獲取水果的數量，可以使用getNumFruit函數。

const getNumFruit = fruit => {return fruitBasket[fruit];
};const numApples = getNumFruit(“apple”);
console.log(numApples); // 27

Now, let's say fruitBasket lives on a remote server. Accessing it takes one second. We can mock this one-second delay with a timeout. (Please refer to the previous article if you have problems understanding the timeout code).

現在，假設fruitBasket位于遠程服務器上。訪問它需要一秒鐘。我們可以用超時模擬這一一秒鐘的延遲。 (如果您在理解超時代碼時遇到問題，請參考上一篇文章 )。

const sleep = ms => {return new Promise(resolve => setTimeout(resolve, ms));
};const getNumFruit = fruit => {return sleep(1000).then(v => fruitBasket[fruit]);
};getNumFruit(“apple”).then(num => console.log(num)); // 27

Finally, let's say you want to use await and getNumFruit to get the number of each fruit in asynchronous function.

最后，假設您要使用await和getNumFruit來獲取異步函數中每個水果的數量。

const control = async _ => {console.log(“Start”);const numApples = await getNumFruit(“apple”);console.log(numApples);const numGrapes = await getNumFruit(“grape”);console.log(numGrapes);const numPears = await getNumFruit(“pear”);console.log(numPears);console.log(“End”);
};

With this, we can begin looking at await in loops.

這樣，我們就可以開始循環查看await狀態。

在for循環中等待 (Await in a for loop)

Let's say we have an array of fruits we want to get from the fruit basket.

假設我們要從水果籃中獲取一系列水果。

const fruitsToGet = [“apple”, “grape”, “pear”];

We are going to loop through this array.

我們將遍歷此數組。

const forLoop = async _ => {console.log(“Start”);for (let index = 0; index < fruitsToGet.length; index++) {// Get num of each fruit}console.log(“End”);
};

In the for-loop, we will use getNumFruit to get the number of each fruit. We'll also log the number into the console.

在for循環中，我們將使用getNumFruit來獲取每個水果的數量。我們還將數字登錄到控制臺中。

Since getNumFruit returns a promise, we can await the resolved value before logging it.

由于getNumFruit返回一個promise，因此我們可以在記錄之前await解析后的值。

const forLoop = async _ => {console.log(“Start”);for (let index = 0; index < fruitsToGet.length; index++) {const fruit = fruitsToGet[index];const numFruit = await getNumFruit(fruit);console.log(numFruit);}console.log(“End”);
};

When you use await, you expect JavaScript to pause execution until the awaited promise gets resolved. This means awaits in a for-loop should get executed in series.

當使用await ，您希望JavaScript暫停執行，直到等待的諾言得到解決為止。這意味著await S IN for循環中，串得到執行。

The result is what you'd expect.

結果就是您所期望的。

“Start”;
“Apple: 27”;
“Grape: 0”;
“Pear: 14”;
“End”;

This behavior works with most loops (like while and for-of loops)...

此行為適用于大多數循環(例如while和for-of循環)...

But it won't work with loops that require a callback. Examples of such loops that require a fallback include forEach, map, filter, and reduce. We'll look at how await affects forEach, map, and filter in the next few sections.

但它不適用于需要回調的循環。需要回退的此類循環的示例包括forEach ， map ， filter和reduce 。在接下來的幾節中，我們將了解await如何影響forEach ， map和filter 。

在forEach循環中等待 (Await in a forEach loop)

We'll do the same thing as we did in the for-loop example. First, let's loop through the array of fruits.

我們將執行與for循環示例相同的操作。首先，讓我們遍歷一系列水果。

const forEachLoop = _ => {console.log(“Start”);fruitsToGet.forEach(fruit => {// Send a promise for each fruit});console.log(“End”);
};

Next, we'll try to get the number of fruits with getNumFruit. (Notice the async keyword in the callback function. We need this async keyword because await is in the callback function).

接下來，我們將嘗試使用getNumFruit獲得水果的數量。 (注意回調函數中的async關鍵字。我們需要此async關鍵字，因為await在回調函數中)。

const forEachLoop = _ => {console.log(“Start”);fruitsToGet.forEach(async fruit => {const numFruit = await getNumFruit(fruit);console.log(numFruit);});console.log(“End”);
};

You might expect the console to look like this:

您可能希望控制臺看起來像這樣：

“Start”;
“27”;
“0”;
“14”;
“End”;

But the actual result is different. JavaScript proceeds to call console.log('End') before the promises in the forEach loop gets resolved.

但是實際結果是不同的。在forEach循環中的承諾得到解決之前，JavaScript會繼續調用console.log('End') 。

The console logs in this order:

控制臺按以下順序登錄：

‘Start’
‘End’
‘27’
‘0’
‘14’

JavaScript does this because forEach is not promise-aware. It cannot support async and await. You _cannot_ use await in forEach.

JavaScript之所以這樣做是因為forEach不支持承諾。它不支持async和await 。您不能在forEach使用await 。

等待地圖 (Await with map)

If you use await in a map, map will always return an array of promise. This is because asynchronous functions always return promises.

如果在map使用await ，則map始終會返回一個promise數組。這是因為異步函數總是返回promise。

const mapLoop = async _ => {console.log(“Start”);const numFruits = await fruitsToGet.map(async fruit => {const numFruit = await getNumFruit(fruit);return numFruit;});console.log(numFruits);console.log(“End”);
};“Start”;
“[Promise, Promise, Promise]”;
“End”;

Since map always return promises (if you use await), you have to wait for the array of promises to get resolved. You can do this with await Promise.all(arrayOfPromises).

由于map總是返回promise(如果使用await )，因此必須等待promise數組得到解析。您可以使用await Promise.all(arrayOfPromises) 。

const mapLoop = async _ => {console.log(“Start”);const promises = fruitsToGet.map(async fruit => {const numFruit = await getNumFruit(fruit);return numFruit;});const numFruits = await Promise.all(promises);console.log(numFruits);console.log(“End”);
};

Here's what you get:

這是您得到的：

“Start”;
“[27, 0, 14]”;
“End”;

You can manipulate the value you return in your promises if you wish to. The resolved values will be the values you return.

如果愿意，您可以操縱在承諾中返回的價值。解析的值將是您返回的值。

const mapLoop = async _ => {// …const promises = fruitsToGet.map(async fruit => {const numFruit = await getNumFruit(fruit);// Adds onn fruits before returningreturn numFruit + 100;});// …
};“Start”;
“[127, 100, 114]”;
“End”;

等待過濾器 (Await with filter)

When you use filter, you want to filter an array with a specific result. Let's say you want to create an array with more than 20 fruits.

使用filter ，您要過濾具有特定結果的數組。假設您要創建一個包含20多個水果的數組。

If you use filter normally (without await), you'll use it like this:

如果您正常使用filter (不等待)，則可以這樣使用它：

// Filter if there’s no await
const filterLoop = _ => {console.log(‘Start’)const moreThan20 = await fruitsToGet.filter(fruit => {const numFruit = fruitBasket[fruit]return numFruit > 20})console.log(moreThan20)console.log(‘End’)
}

You would expect moreThan20 to contain only apples because there are 27 apples, but there are 0 grapes and 14 pears.

您會期望moreThan20只包含一個蘋果，因為有27個蘋果，但是有0個葡萄和14個梨。

“Start”[“apple”];
(“End”);

await in filter doesn't work the same way. In fact, it doesn't work at all. You get the unfiltered array back...

在filter中await的方式不同。實際上，它根本不起作用。您得到未過濾的陣列...

const filterLoop = _ => {console.log(‘Start’)const moreThan20 = await fruitsToGet.filter(async fruit => {const numFruit = getNumFruit(fruit)return numFruit > 20})console.log(moreThan20)console.log(‘End’)
}“Start”[(“apple”, “grape”, “pear”)];
(“End”);

Here's why it happens.

這就是它發生的原因。

When you use await in a filter callback, the callback always a promise. Since promises are always truthy, everything item in the array passes the filter. Writing await in a filter is like writing this code:

當您在filter回調中使用await時，該回調始終為promise。由于承諾始終是真實的，因此數組中的所有項目都會通過過濾器。在filter編寫await就像編寫以下代碼：

// Everything passes the filter…
const filtered = array.filter(true);

There are three steps to use await and filter properly:

可以使用三個步驟來正確使用await和filter ：

1. Use map to return an array promises

1.使用map返回一個數組promises

2. await the array of promises

2. await承諾

3. filter the resolved values

3. filter解析值

const filterLoop = async _ => {console.log(“Start”);const promises = await fruitsToGet.map(fruit => getNumFruit(fruit));const numFruits = await Promise.all(promises);const moreThan20 = fruitsToGet.filter((fruit, index) => {const numFruit = numFruits[index];return numFruit > 20;});console.log(moreThan20);console.log(“End”);
};Start[“apple”];
End;

等待減少 (Await with reduce)

For this case, let's say you want to find out the total number of fruits in the fruitBastet. Normally, you can use reduce to loop through an array and sum the number up.

對于這種情況，假設您要查找fruitBastet中的水果總數。通常，您可以使用reduce遍歷一個數組并將其求和。

// Reduce if there’s no await
const reduceLoop = _ => {console.log(“Start”);const sum = fruitsToGet.reduce((sum, fruit) => {const numFruit = fruitBasket[fruit];return sum + numFruit;}, 0);console.log(sum);console.log(“End”);
};

You'll get a total of 41 fruits. (27 + 0 + 14 = 41).

您總共會得到41水果。 (27 + 0 + 14 = 41)。

“Start”;
“41”;
“End”;

When you use await with reduce, the results get extremely messy.

當使用帶有reduce的await時，結果將變得非常混亂。

// Reduce if we await getNumFruit
const reduceLoop = async _ => {console.log(“Start”);const sum = await fruitsToGet.reduce(async (sum, fruit) => {const numFruit = await getNumFruit(fruit);return sum + numFruit;}, 0);console.log(sum);console.log(“End”);
};“Start”;
“[object Promise]14”;
“End”;

What?! [object Promise]14?!

什么？！ [object Promise]14嗎？

Dissecting this is interesting.

剖析這很有趣。

In the first iteration, sum is 0. numFruit is 27 (the resolved value from getNumFruit(‘apple’)). 0 + 27 is 27.
在第一次迭代中， sum為0 。 numFruit為27(來自getNumFruit('apple')的解析值)。 0 + 27是27。
In the second iteration, sum is a promise. (Why? Because asynchronous functions always return promises!) numFruit is 0. A promise cannot be added to an object normally, so the JavaScript converts it to [object Promise] string. [object Promise] + 0 is [object Promise]0
在第二次迭代中， sum是一個承諾。 (為什么？因為異步函數總是返回諾言！) numFruit為0。通常無法將諾言添加到對象，因此JavaScript將其轉換為[object Promise]字符串。 [object Promise] + 0為[object Promise]0
In the third iteration, sum is also a promise. numFruit is 14. [object Promise] + 14 is [object Promise]14.
在第三次迭代中， sum也是一個承諾。 numFruit是14 。 [object Promise] + 14是[object Promise]14 。

Mystery solved!

謎團已揭開！

This means, you can use await in a reduce callback, but you have to remember to await the accumulator first!

這意味著，您可以在reduce回調中使用await ，但是您必須記住要先await累加器！

const reduceLoop = async _ => {console.log(“Start”);const sum = await fruitsToGet.reduce(async (promisedSum, fruit) => {const sum = await promisedSum;const numFruit = await getNumFruit(fruit);return sum + numFruit;}, 0);console.log(sum);console.log(“End”);
};“Start”;
“41”;
“End”;

But... as you can see from the gif, it takes pretty long to await everything. This happens because reduceLoop needs to wait for the promisedSum to be completed for each iteration.

但是...從gif中可以看到， await所有內容都需要很長時間。發生這種情況是因為reduceLoop需要等待每次迭代的promisedSum完成。

There's a way to speed up the reduce loop. (I found out about this thanks to Tim Oxley. If you await getNumFruits() first before await promisedSum, the reduceLoop takes only one second to complete:

有一種方法可以加快reduce循環。 (我感謝Tim Oxley對此進行了了解。如果在await getNumFruits(之前先await promisedSum await getNumFruits( )，則reduceLoop僅需一秒鐘即可完成：

const reduceLoop = async _ => {console.log(“Start”);const sum = await fruitsToGet.reduce(async (promisedSum, fruit) => {// Heavy-lifting comes first.// This triggers all three getNumFruit promises before waiting for the next iteration of the loop.const numFruit = await getNumFruit(fruit);const sum = await promisedSum;return sum + numFruit;}, 0);console.log(sum);console.log(“End”);
};

This works because reduce can fire all three getNumFruit promises before waiting for the next iteration of the loop. However, this method is slightly confusing since you have to be careful of the order you await things.

之所以getNumFruit是因為reduce可以在等待循環的下一次迭代之前觸發所有三個getNumFruit承諾。但是，此方法有些混亂，因為您必須注意await的順序。

The simplest (and most efficient way) to use await in reduce is to:

在reduce中使用await的最簡單(也是最有效的方式)是：

1. Use map to return an array promises

1.使用map返回一個數組promises

2. await the array of promises

2. await承諾

3. reduce the resolved values

3. reduce解析值

const reduceLoop = async _ => {console.log(“Start”);const promises = fruitsToGet.map(getNumFruit);const numFruits = await Promise.all(promises);const sum = numFruits.reduce((sum, fruit) => sum + fruit);console.log(sum);console.log(“End”);
};

This version is simple to read and understand, and takes one second to calculate the total number of fruits.

此版本易于閱讀和理解，并且花費一秒鐘來計算水果總數。