forEach中的await

　　不知道你是否寫過類似的代碼:

　　function test() {

　　let arr = [3, 2, 1]

　　arr.forEach(async item => {

　　const res = await fetch(item)

　　console.log(res)

　　})

　　console.log('end')

　　}

　　function fetch(x) {

　　return new Promise((resolve, reject) => {

　　setTimeout(() => {

　　resolve(x)

　　}, 500 * x)

　　})

　　}

　　test()

　　復制代碼

　　我當時期望的打印順序是

　　3

　　2

　　1

　　end

　　結(jié)果現(xiàn)實與我開了個玩笑，打印順序居然是

　　end

　　1

　　2

　　3

　　為什么?

　　復制代碼

　　其實原因很簡單，那就是 forEach 只支持同步代碼。

　　我們可以參考下 Polyfill 版本的 forEach，簡化以后類似就是這樣的偽代碼

　　while (index < arr.length) {

　　callback(item, index) //也就是我們傳入的回調(diào)函數(shù)

　　}

　　復制代碼

　　從上述代碼中我們可以發(fā)現(xiàn)，forEach 只是簡單的執(zhí)行了下回調(diào)函數(shù)而已，并不會去處理異步的情況。并且你在 callback 中即使使用 break 也并不能結(jié)束遍歷。

　　怎么解決?

　　一般來說解決的辦法有2種,for...of和for循環(huán)。

　　使用 Promise.all 的方式行不行，答案是： 不行

　　async function test() {

　　let arr = [3, 2, 1]

　　await Promise.all(

　　arr.map(async item => {

　　const res = await fetch(item)

　　console.log(res)

　　})

　　)

　　console.log('end')

　　}

　　復制代碼

　　可以看到并沒有按照我們期望的輸出。

　　這樣可以生效的原因是 async 函數(shù)肯定會返回一個 Promise 對象，調(diào)用 map 以后返回值就是一個存放了 Promise 的數(shù)組了，這樣我們把數(shù)組傳入 Promise.all 中就可以解決問題了。但是這種方式其實并不能達成我們要的效果，如果你希望內(nèi)部的 fetch 是順序完成的，可以選擇第二種方式。

　　第1種方法是使用 for...of

　　async function test() {

　　let arr = [3, 2, 1]

　　for (const item of arr) {

　　const res = await fetch(item)

　　console.log(res)

　　}

　　console.log('end')

　　}

　　復制代碼

　　這種方式相比 Promise.all 要簡潔的多，并且也可以實現(xiàn)開頭我想要的輸出順序。

　　但是這時候你是否又多了一個疑問?為啥 for...of 內(nèi)部就能讓 await 生效呢。

　　因為 for...of 內(nèi)部處理的機制和 forEach 不同，forEach 是直接調(diào)用回調(diào)函數(shù)，for...of 是通過迭代器的方式去遍歷。

　　async function test() {

　　let arr = [3, 2, 1]

　　const iterator = arr[Symbol.iterator]()

　　let res = iterator.next()

　　while (!res.done) {

　　const value = res.value

　　const res1 = await fetch(value)

　　console.log(res1)

　　res = iterator.next()

　　}

　　console.log('end')

　　}

　　復制代碼

　　第2種方法是使用 for循環(huán)

　　async function test() {

　　let arr = [3, 2, 1]

　　for (var i=0;i

　　const res = await fetch(arr[i])

　　console.log(res)

　　}

　　console.log('end')

　　}

　　function fetch(x) {

　　return new Promise((resolve, reject) => {

　　setTimeout(() => {

　　resolve(x)

　　}, 500 * x)

　　})

　　}

　　test()

　　復制代碼

　　第3種方法是使用 while循環(huán)

　　async function test() {

　　let arr = [3, 2, 1]

　　var i=0;

　　while(i!==arr.length){

　　const res = await fetch(arr[i])

　　console.log(res)

　　i++;

　　}

　　console.log('end')

　　}

　　function fetch(x) {

　　return new Promise((resolve, reject) => {

　　setTimeout(() => {

　　resolve(x)

　　}, 500 * x)

　　})

　　}

　　test()

　　復制代碼

　　要想在循環(huán)中使用async await，請使用for...of 或者 for 循環(huán), while循環(huán)

　　forEach支持async await

　　forEach 在正常情況像下面這么寫肯定是做不到同步的，程序不會等一個循環(huán)中的異步完成再進行下一個循環(huán)。原因很明顯，在上面的模擬中，while 循環(huán)只是簡單執(zhí)行了 callback，所以盡管 callback 內(nèi)使用了 await ，也只是影響到 callback 內(nèi)部。

　　arr.myforeach(async v => {

　　await fetch(v);

　　});

　　復制代碼

　　要支持上面這種寫法，只要稍微改一下就好

　　Array.prototype.myforeach = async function (fn, context = null) {

　　let index = 0;

　　let arr = this;

　　if (typeof fn !== 'function') {

　　throw new TypeError(fn + ' is not a function');

　　}

　　while (index < arr.length) {

　　if (index in arr) {

　　try {

　　await fn.call(context, arr[index], index, arr);

　　} catch (e) {

　　console.log(e);

　　}

　　}

　　index ++;

　　}

　　};

上一篇

說說React中onClick綁定后的工作原理