scenario

You have an array, and you loop through it to get the results. Of course you might write the following code

The wrong sample

function api(i) { return new Promise((resolve, reject) => { setTimeout(() => { const n = Math.random(); If (n > 0.5) {resolve(n); } else { resolve(-n) } }, 1000 * 1); }); } const list = [1, 2, 3, 4, 5]; Async function fn() {// array forEach(async (el, index) => {const n = await API (index); console.log(n, index); }); }; fn();Copy the code

On the console, instead of printing the code as expected, you wait and print it all. Look at the code again to make sure the syntax is correct. The problem is obvious. ForEach.

The correct code

function api(i) { return new Promise((resolve, reject) => { setTimeout(() => { const n = Math.random(); If (n > 0.5) {resolve(n); } else { resolve(-n) } }, 1000 * 1); }); } const list = [1, 2, 3, 4, 5]; async function fn() { for (let i = 0; i < list.length; i++) { const n = await api(i); console.log('for--------', n, i); }}; fn();Copy the code

polyfill

ForEach () was added to the ECMA-262 standard in version 5; As it may not exist in other implementations of the standard, you can insert the following code before you call forEach(), using forEach() if not supported locally. The algorithm is specified in ecMA-262 version 5. It assumes that Object and TypeError have their initial values and that callback.call is equivalent to function.prototype.call ().

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 = thisArg; } // 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 }; }Copy the code

conclusion

‘await’ is written inside async functions. ‘await’ is just syntactic sugar to make asynchro synchronous and easy to write and read. Await an asynchronous promise to complete resolve or reject, and throw an exception using a try catch. ForEach invalid with await, use for loop instead.