Node Express JS中如何等待多个fetch响应存入数组后再响应客户端

问题根因 #

Array.prototype.forEach 不支持异步等待逻辑，你传入的async回调返回的Promise没有被收集和等待，await mammalsArray.forEach(...) 实际不会等待内部的接口请求执行完成，因此所有请求还在 pending 状态时就已经执行了res.send(final)，返回空数组。

修复方案 #

方案1：并行请求（性能最优，无并发限制时优先使用） #

通过map收集所有请求的Promise实例，再用Promise.all批量等待所有请求完成，自动返回按顺序排列的结果数组：

router.get('/animals', async (req, res) => {
  try {
    const mammalsArray = req.query.mammals.split(',');
    // 批量生成所有请求的Promise
    const requestTasks = mammalsArray.map(async mammal => {
      // 对参数做url编码，避免特殊字符导致请求异常
      const response = await fetch(`https://someapi.com/pedia?tag=${encodeURIComponent(mammal)}`);
      return response.json();
    });
    // 等待所有请求完成，直接拿到结果数组
    const final = await Promise.all(requestTasks);
    res.send(final);
  } catch (err) {
    // 增加错误捕获，避免接口无响应
    res.status(500).send({
      error: '动物数据查询失败',
      msg: err.message
    })
  }
});

方案2：串行请求（适合第三方接口有并发调用限制的场景） #

使用支持异步等待的for...of循环逐个发起请求：

router.get('/animals', async (req, res) => {
  try {
    const mammalsArray = req.query.mammals.split(',');
    const final = [];
    for (const mammal of mammalsArray) {
      const response = await fetch(`https://someapi.com/pedia?tag=${encodeURIComponent(mammal)}`);
      const json = await response.json();
      final.push(json);
    }
    res.send(final);
  } catch (err) {
    res.status(500).send({
      error: '动物数据查询失败',
      msg: err.message
    })
  }
});

内容的提问来源于stack exchange，提问作者Rizwan