如何在JavaScript中并行调用API并同时修改响应结果

我想用axios.all发起大量并行API调用，同时给每个响应结果添加一个newProperty属性，值取映射数组里对应的元素，让返回的对象包含这个额外属性。

原代码如下：

const url='https://jsonplaceholder.typicode.com/posts/'
const arr=[1,2]

const fn = async () => {
    const obj = (await axios.all(arr.map(el=>axios(url+el)))).map((item)=>item.data)
    console.log(obj)
}
fn()

期望得到的响应格式示例：

{
    "newProperty": 1,
    "userId": 1,
    "id": 1,
    "title": "sunt aut facere repellat",
    "body": "quia et suscipit\nsuscipit recusandae consequuntur"
}

解决方法 #

方法一：请求阶段绑定原元素与响应

在发起每个请求时，通过then把原数组元素和响应数据打包在一起，后续直接解构合并即可：

const url='https://jsonplaceholder.typicode.com/posts/'
const arr=[1,2]

const fn = async () => {
    // 每个请求返回包含原元素和响应数据的Promise
    const requests = arr.map(el => 
        axios(url + el).then(res => ({ el, data: res.data }))
    );
    // 等待所有请求完成后，合并自定义属性与响应数据
    const result = (await axios.all(requests)).map(({ el, data }) => ({
        newProperty: el,
        ...data
    }));
    console.log(result);
}
fn()

方法二：利用索引对应原数组元素

因为axios.all会保证响应数组的顺序和请求数组的顺序完全一致，所以可以直接通过索引从原数组中取对应值：

const url='https://jsonplaceholder.typicode.com/posts/'
const arr=[1,2]

const fn = async () => {
    const responses = await axios.all(arr.map(el => axios(url + el)));
    // 遍历响应时通过索引匹配原数组元素
    const result = responses.map((res, index) => ({
        newProperty: arr[index],
        ...res.data
    }));
    console.log(result);
}
fn()

两种方法都能实现需求，第一种更稳妥（避免特殊情况下的顺序问题），第二种写法更简洁。

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