為什麽 array.foreach 不支持 async/await
一、背景
react 項目中,渲染組件時,顯示的數據一直有問題,本來以為是 react 組件的問題,後來才發現罪魁禍首在 fetch 數據的過程,因為我用了 async/await ,而卻搭配了 foreach 去循環拉取數據,卻導致本以為是同步的操作還是變成了異步。
二、正文
沿用我之前一篇文章(callback vs async.js vs promise vs async / await)裏的例子,來重現這個錯誤:
let read = function (code) { if (code) { return true; } else { return false; } } let readFileA = function () { return new Promise(function (resolve, reject) { if (read(1)) { resolve("111"); } else { reject("a fail"); } }); } let readFileB = function () { return new Promise(function (resolve, reject) { if (read(1)) { resolve("222"); } else { reject("b fail"); } }); } let readFileC = function () { return new Promise(function (resolve, reject) { if (read(1)) { resolve("333"); } else { reject("c fail"); } }); } async function test() { try { let readFileFun = [readFileA(), readFileB(), readFileC()] console.log("………………start………………") // // 方法一:forEach // await readFileFun.forEach(async (func, i) => { // console.log("start:", i+1) // let re = await func; // console.log(re) // console.log("end:", i+1) // }) // // 方法二:for loop // for (let i = 0; i < readFileFun.length; ++i) { // console.log("start:", i+1) // let re = await readFileFun[i]; // console.log(re) // console.log("end:", i+1) // } // // 方法三:for ... of // for (const [i, func] of readFileFun.entries()) { // console.log("start:", i+1) // let re = await func; // console.log(re) // console.log("end:", i+1) // } console.log("………………end………………") } catch (err) { console.log(err); // 如果b失敗,return: b fail } } test();
輸出結果:
# (錯)方法一:
………………start………………
start: 1
start: 2
start: 3
111
end: 1
222
end: 2
333
end: 3
………………end………………
# (對)方法二、三:
………………start………………
start: 1
111
end: 1
start: 2
222
end: 2
start: 3
333
end: 3
………………end………………
為什麽 foreach 不行,而 普通 for 循環 和 for…of 卻正常呢?
我們得先從 foreach 的源碼看起:(https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach>)
// Production steps of ECMA-262, Edition 5, 15.4.4.18 // Reference: http://es5.github.io/#x15.4.4.18 if (!Array.prototype.forEach) { Array.prototype.forEach = function(callback/*, thisArg*/) { var T, k; if (this == null) { throw new TypeError('this is null or not defined'); } // 1. Let O be the result of calling toObject() passing the // |this| value as the argument. var O = Object(this); // 2. Let lenValue be the result of calling the Get() internal // method of O with the argument "length". // 3. Let len be toUint32(lenValue). var len = O.length >>> 0; // 4. If isCallable(callback) is false, throw a TypeError exception. // See: http://es5.github.com/#x9.11 if (typeof callback !== 'function') { throw new TypeError(callback + ' is not a function'); } // 5. If thisArg was supplied, let T be thisArg; else let // T be undefined. if (arguments.length > 1) { T = arguments[1]; } // 6. Let k be 0. k = 0; // 7. Repeat while k < len. while (k < len) { var kValue; // a. Let Pk be ToString(k). // This is implicit for LHS operands of the in operator. // b. Let kPresent be the result of calling the HasProperty // internal method of O with argument Pk. // This step can be combined with c. // c. If kPresent is true, then if (k in O) { // i. Let kValue be the result of calling the Get internal // method of O with argument Pk. kValue = O[k]; // ii. Call the Call internal method of callback with T as // the this value and argument list containing kValue, k, and O. callback.call(T, kValue, k, O); } // d. Increase k by 1. k++; } // 8. return undefined. }; }
摘抄最重要的部分:
/*
O 為傳入數組
len 為傳入數組長度
callback 為傳入回調函數
*/
while (k < len) {
var kValue;
if (k in O) {
kValue = O[k];
callback.call(T, kValue, k, O);
}
k++;
}
可以看到callback.call(T, kValue, k, O);
這一句,callback
其實是我們傳入的一個被 async 封裝的 promise 對象,而 Array.prototype.forEach 內部並未對這個promise 對象做任何處理,只是忽略它。
如果我們嘗試把 Array.prototype.forEach 改造一下,讓它不要忽視,就可以達到效果了,如下:
Array.prototype.forEach = async function(callback/*, thisArg*/) {
// ………
await callback.call(T, kValue, k, O);
// ………
};
解決方案
你總不能去侵入式的改造Array.prototype.forEach吧!所以最簡單的辦法就是拋棄 foreach,使用 for…of 或者 for 循環!
參考資料
https://stackoverflow.com/questions/37576685/using-async-await-with-a-foreach-loop
https://github.com/babel/babel/issues/909
為什麽 array.foreach 不支持 async/await