如何在map方法中使用Axios获取数据？解决返回undefined问题

问题代码 #

const devices = [1001, 1002, 1003];
const fetchData = () => {
     const fP = devices?.map(async (id) => {
        const { data } = await axios.get(`https://www.roads.com/road/ap/roadControl/${id}`, myHeaders);          
        return data.data;
    })

    return (fP);
};


const {data} = useQuery("post", fetchData);
console.log(data);

问题描述 #

尝试通过map遍历devices数组批量调用接口，但返回undefined；单独调用单个接口（如下代码）却能正常获取数据：

const { data } = await axios.get(`https://www.roads.com/road/ap/roadControl/1001`, myHeaders); 

修复方案 #

问题根源 #

map中使用async函数时，会返回一个Promise数组，但原代码里fetchData直接返回了这个Promise数组，没有等待所有Promise完成。useQuery需要接收返回单个Promise的函数，原函数返回的Promise数组无法被正确处理，最终导致data为undefined。

修复代码 #

const devices = [1001, 1002, 1003];
// 给fetchData添加async关键字，转为异步函数
const fetchData = async () => {
     const fP = devices?.map(async (id) => {
        const { data } = await axios.get(`https://www.roads.com/road/ap/roadControl/${id}`, myHeaders);          
        return data.data;
    })
    // 用Promise.all等待所有请求完成，将Promise数组转为结果数组
    return await Promise.all(fP);
};


const {data} = useQuery("post", fetchData);
console.log(data); // 此时会输出三个接口返回的data.data组成的数组

关键修改点 #

• 给fetchData添加async关键字，使其成为异步函数，符合useQuery对查询函数的要求
• 使用await Promise.all(fP)等待所有接口请求的Promise完成，将Promise数组转换为实际的结果数组后返回

这样useQuery会等待fetchData的Promise resolve，最终拿到的data就是所有接口返回的有效数据组成的数组。

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