在foreach中使用async/await的问题
在foreach中使用async/await的问题
问题描述
在一个数组的forEach方法中需要针对数组的每一项发起一个http请求，并且每个请求都需要等待异步返回结果后依次处理，开始的代码如下：
import urlList from './url.json';
import api from './api';
...
const autoVisit = async () => {
urlList.forEach((e, i) => {
console.log('###################################正在发送请求...');
const res = await api.httpsRequest(url.url);
if(!res.ok){
console.log(`Error: ${res.body}`);
console.log('###################################请求失败，已跳过');
}
});
};
...
请求的接口是：
this.headers = {
...
}
httpsRequest = (url) => {
const doRequest = new Promise((resolve, reject) => {
https.get(url, this.headers, (res) => {
resolve(res);
}).on("error", (err) => {
reject(new Error(err.message));
});
});
const timer = new Promise((resolve, reject) => {
setTimeout(()=>{
reject(new Error('request timeout'));
},5000)
});
return Promise.race([doRequest, timer]).then(res => ({ ok: true })).catch(error => ({ ok: false, body: error.message }));
}
预想的结果是，程序依次从配置的json文件中取参数并发起HTTP请求，但是在编译时就在await处报错，这里应该是没有将回调函数定义async异步关键字，把代码改成：
const autoVisit = async () => {
urlList.forEach(async (e, i) => {
console.log('###################################正在发送请求...');
const res = await api.httpsRequest(url.url);
if(!res.ok){
console.log(`Error: ${res.body}`);
console.log('###################################请求失败，已跳过');
}
});
};
此时不再报错，但是程序会以异步的方式发起请求，并没有等待返回的结果实现依次执行的需求。
原因
考虑问题的原因应该是出在foreach中，在网上找到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 = 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
};
}
可以看到代码中有一个while循环一直在调用callback回调函数，判断这里应该是异步并行调用的，因为我们只是在将foreach中的callback使用了async/await来等待异步返回操作，而本身这个foreach并没有使用async/await来等待异步返回，这里我们做一个测试：
// 模拟一个请求
const simulateFetch = () => {
const t = 'go';
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(t);
}, 2000);
});
};
// 自定义一个类似的函数
// 简化了一些步骤
const CustomForeach = (arr, callback) => {
const length = arr.length;
const O = Object(arr);
let k = 0;
while (k < length) {
if (k in O) {
console.log('doing foreach...');
const kValue = O[k];
callback(kValue, k, O);
}
k++;
}
};
const doTest = () => {
const myArray = [1, 2, 3, 4, 5, 6, 7, 8];
CustomForeach(myArray, async (e, i) => {
await simulateFetch();
console.log(e);
});
};
doTest();
运行后可以看到打印的结果：
doing foreach...
doing foreach...
doing foreach...
doing foreach...
doing foreach...
doing foreach...
doing foreach...
doing foreach...
1
2
3
4
5
6
7
8
这里可以看到输出的结果跟我们预想的相近，while循环会并行执行，不会等待里面的callback的返回，也就是说foreach会并行执行数组的所有callback函数，而在callback中定义的async/await的作用只是在回调函数内部以等待异步的方式来运行，在我们的测试代码中也只会实现先等待2秒再打印值的效果，可以预料的是，去掉callback中的async/await关键字，数字会随着回调函数的执行立即被打印，这里不再赘述。
解决问题
那么按照这个思路，如果我们将foreach函数加上async/await是不是就可以解决问题了呢？我们重新修改一下测试代码：
const simulateFetch = () => {
const t = 'go';
return new Promise((resolve, reject) => {
console.log('正在请求......');
setTimeout(() => {
console.log('完成请求!!!');
resolve(t);
}, 2000);
});
};
// 加上async/await
const CustomForeach = async (arr, callback) => {
const length = arr.length;
const O = Object(arr);
let k = 0;
while (k < length) {
if (k in O) {
console.log('doing foreach...');
const kValue = O[k];
await callback(kValue, k, O);
}
k++;
}
};
const doTest = () => {
const myArray = [1, 2, 3, 4, 5, 6, 7, 8];
CustomForeach(myArray, async (e, i) => {
await simulateFetch();
console.log(e);
});
};
doTest();
运行后可以看到打印的结果：
doing foreach...
正在请求......
完成请求!!!
1
doing foreach...
正在请求......
完成请求!!!
2
doing foreach...
正在请求......
完成请求!!!
3
doing foreach...
正在请求......
完成请求!!!
4
doing foreach...
正在请求......
完成请求!!!
5
doing foreach...
正在请求......
完成请求!!!
6
doing foreach...
正在请求......
完成请求!!!
7
doing foreach...
正在请求......
完成请求!!!
8
通过打印的结果可以看到，修改foreach函数后可以实现我们想要的等待异步执行请求的需求。
总结
由上面的解决过程可以看出，由于在foreach中已经完成了一次对于循环的封装，当 使用foreach时其实也就相当于调用了一个封装了while或者for循环的函数，这个函数本身并没有使用async/await来处理异步，所以使用时在回调函数里面加上async/await是没有作用的，遍历的方式有很多种，那么我们在需要遍历处理异步的时候，最好还是使用for或者while来实现，不管是封装一个新的函数，或者是直接使用来遍历都可以避免这个问题。