We will encounter this situation:
const result = [];
const ids = [1, 2, 3, 4, 5];
ids.forEach(id => {
const list = http(id); //http is an asynchronous request to get the information of the corresponding id
result.push(list.name);
})
console.log(result); // []
The result is an empty array. In fact, we want the result to print the information name of the corresponding id; The reason is that http is an asynchronous request, so the function callback of forEach will put the asynchronous request into the event queue and then execute console Log (result). Finally, put the functions in the event queue into the main thread for execution, so we can see that the printed result is an empty array if we are in console Log (result) is followed by a code setTimeout (() = > {console.log(result)}), and the printed result is the information name we want; Therefore, we are thinking about whether we can get the results we want without this setTimeout, but by adding await before asynchronous requests to achieve the results we want:
const result = [];
const ids = [1, 2, 3, 4, 5];
ids.forEach(async (id) => {
const list = await http(id); //http is an asynchronous request to get the information of the corresponding id
result.push(list.name);
})
console.log(result); // []
The result is unexpected. An empty array is still printed, so we need to see how the forEach method is encapsulated at this time. This is a source code of the forEach method:
// 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
};
}
We can see the callback The execution of call (T, kvalue, K, O) is a synchronous execution, so our callback function with async still can not get the result we want, because await added before http can only ensure that the callback function executes http first and then result push(list.name)； It is not guaranteed that the console will be printed after all the callback functions of forEach method are executed log(result)； So let's transform the forEach method:
const result = [];
const ids = [1, 2, 3, 4, 5];
ids.forEach(async (id) => {
const list = await http(id); //http is an asynchronous request to get the information of the corresponding id
result.push(list.name);
})
console.log(result); // []
The result is unexpected. An empty array is still printed, so we need to see how the forEach method is encapsulated at this time. This is a source code of the forEach method:
// 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 = async 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.
await callback.call(T, kValue, k, O);
}
// d. Increase k by 1.
k++;
}
// 8. return undefined
};
}
We define forEach as an asynchronous function and add await before the callback function, so that the awati we add before http can achieve the results we want;
Now the question comes again. Can we use other methods to get the results we need without changing the forEach source code? The answer is yes:
-
Use promise all()
const result = []; const ids = [1, 2, 3, 4, 5]; const https = ids.map(id => { return http(id); }); const res = await Promise.all(https); res.forEach(list => { result.push(list.name); }) console.log(result); // [] -
Using the length attribute
const result = []; const ids = [1, 2, 3, 4, 5]; const { length } = ids; async function request(){ return new Promise((resolve) => { ids.forEach((id, i)=> { const list = await http(id); result.push(list.name); if(i === length - 1) { resolve(result); } }) }); } await request(); console.log(result);