使用axios的函数无法返回值，如何获取目标数组？

问题出在axios请求是异步操作：当你执行return arr时，axios的请求还没完成，then回调里的代码根本没执行，所以返回的是空数组。

有两种常用的解决方法：

方法一：使用async/await #

把函数改成异步函数，用await等待axios请求完成后再处理数据并返回：

const myFunc = async (query) => {
    let arr = [];
    // 等待axios请求完成拿到响应
    const response = await axios({
        url: GRAPHQL_ENDPOINT,
        method: 'post',
        headers: headers,
        data: { query: query}
    });
    // 处理响应数据
    response.data.forEach(d => {
        arr.push(qs.parse(d.node.name));
    });
    return arr;
}

// 调用时需要用await（只能在async函数里用）或者.then接收结果
// 示例1：在async函数内调用
// async function fetchData() {
//   const result = await myFunc(myQuery);
//   console.log(result); // 这里拿到目标数组
// }
// fetchData();

// 示例2：用.then链式调用
myFunc(myQuery).then(result => {
    console.log(result); // 这里获取目标数组
});

方法二：让函数直接返回Promise #

不用async/await的话，可以让函数直接返回axios的Promise，在then里处理数据并返回数组：

const myFunc = (query) => {
    return axios({
        url: GRAPHQL_ENDPOINT,
        method: 'post',
        headers: headers,
        data: { query: query}
    }).then((response) => {
        const arr = [];
        response.data.forEach(d => {
            arr.push(qs.parse(d.node.name));
        });
        return arr;
    });
}

// 调用时通过.then获取结果
myFunc(myQuery).then(result => {
    console.log(result); // 这里拿到目标数组
});

本质上两种方法都是利用Promise来处理异步逻辑，必须等axios请求完成后才能拿到处理好的数组，不能像同步代码那样直接返回结果。

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