异步函数将数组留空超出范围[重复]答案

【问题标题】：Async Function leaving array blank outside of scope [duplicate]异步函数将数组留空超出范围[重复]
【发布时间】：2020-10-17 01:03:43
【问题描述】：

我正在使用异步函数来尝试使用 Axios 将数据拉入数组。当我在下面的 forEach 中记录数据时，它会显示出来，但是当我在 forEach 之外记录它时，它会返回空白。我认为这是因为程序仍在运行，但我不确定如何在没有超时的情况下解决。

const user = async(IDs) => {

    var output;
    var URL;
    var result = [];

    IDs[0].forEach(async(id) => {
        URL = "https://example-api.com/" + id;
        output = await axios.get(URL)
            .then(function(data){
                result.push(data.data.text);
                console.log(result) // Returns the data
            });
    })

    console.log(result) // returns blank

}

【问题讨论】：

使用 for 代替 forEach
它根本不起作用，因为您在 foreach 循环中调用了一个异步函数。要使其正常工作，只需在您的 IDs[0].foreach 行之前添加 await ，一切都会正常工作
存在多个错误，例如在 forEach 循环中使用 asycn。然后你使用.then() 和await 这也没有意义
也相关：Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference

标签： javascript node.js asynchronous async-await axios

【解决方案1】：

所有其他解决方案都很好，但是它们会逐个获取数据，这会使您的代码变慢。

使用这种方法，因为它将充分利用事件循环，这将使您的程序执行得更快。

const result = await Promise.all(IDs[0].map(id => {
  return axios.get(`https://example-api.com/${id}`)
    .then(data => (data.data.text)) 
}))

【讨论】：

【解决方案2】：

   const user = async(IDs) => {
    var output;
    var URL;
    var result = [];

    for (const id of IDs[0]) {
        URL = "https://example-api.com/" + id;
        try {
            output = await axios.get(URL);
            result.push(data.data.text);
        } catch (error) {
            console.log(error)
        }
    }
}

试试看

【讨论】：

【解决方案3】：

@Shubham 提出了最有效的解决方案（Promise.all 和 Array.map），但是，将 async / await 与 Promise.then 结合使用会降低可读性，尤其是在复杂性增加时。

在可能的情况下，await 应优先于 Promise.then：

const result = await Promise.all(IDs[0].map(async id => {
    const data = await axios.get(`https://example-api.com/${id}`);
    return data.data.text;
}));

【讨论】：

【解决方案4】：

foreach 循环内的异步函数不等待 axios 响应。

尝试使用for-in 循环。

for (const id of IDs[0]) {
    URL = "https://example-api.com/" + id;
    const output = await axios.get(URL)
    result.push(output.data.text);
    console.log(result) // Returns the data       
})

【讨论】：

另外你不应该要求then 声明。 await操作直接将异步操作的响应返回给赋值变量。