在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来实现，不管是封装一个新的函数，或者是直接使用来遍历都可以避免这个问题。