如何将异步并行请求的返回数据与对应源数组ID关联？

你遇到的这个问题很典型——当用Promise.all批量发起请求时，如果只返回响应结果，确实会丢失原请求的关联信息。其实只需要在映射请求的时候，把原数组的id和响应数据绑定在一起就搞定了，给你两种实用的实现方式：

方式一：用async/await直观绑定 #

这种写法逻辑清晰，适合习惯async/await风格的同学：

const myArray = [ 
  { id: 987447, url: 'http://someurl.com/data1.json' }, 
  { id: 923473, url: 'http://someurl.com/data2.json' }, 
];

async function getData(myArray) {
  const data = await Promise.all(
    myArray.map(async (item) => {
      // 发起请求并等待响应返回
      const response = await axios.get(item.url);
      // 返回包含原ID和对应数据的对象
      return {
        id: item.id,
        responseData: response.data, // 若需要完整axios响应对象，直接用response即可
      };
    })
  );
  
  console.log(data);
  // 输出示例：[{ id: 987447, responseData: {...} }, { id: 923473, responseData: {...} }]
}

方式二：利用Promise.then链式处理 #

如果更喜欢链式调用的简洁写法，可以这样实现：

const myArray = [ 
  { id: 987447, url: 'http://someurl.com/data1.json' }, 
  { id: 923473, url: 'http://someurl.com/data2.json' }, 
];

async function getData(myArray) {
  const data = await Promise.all(
    myArray.map(item => 
      axios.get(item.url)
        .then(response => ({ id: item.id, responseData: response.data }))
    )
  );
  
  console.log(data);
}

核心思路 #

两种写法的核心都是：在map的回调里，不要只返回axios的Promise实例，而是返回一个包含原id和响应结果的新对象。这样Promise.all解析完成后，你拿到的数组里每一项都能直接对应到原请求的ID，再也不会搞混数据对应关系啦。

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