React Native中async forEach外部无法获取axios返回数据如何解决

问题原因 #

• Array.prototype.forEach 本身不支持异步等待，传入async回调时它只会同时触发所有异步请求，不会等待所有请求执行完毕就会继续执行后续代码，所以执行到外部console.log(ret)时，所有axios请求还未完成，ret自然是空数组。

修复方案 #

把forEach替换为map生成Promise数组，再用Promise.all等待所有异步请求完成即可：

async function search(){
    try{
        var url = 'http://localhost:3002/categorias'
        const response = await axios.get(url);
        var categorias = response.data
        var catRandom = []
        var i = 5
        while(i--){
            var j = Math.floor(Math.random() * categorias.length)
            catRandom.push(categorias[j]["id"])
            categorias.splice(j, 1)
        }
        // 替换forEach为map生成Promise数组，用Promise.all等待所有请求完成
        const ret = await Promise.all(
            catRandom.map(async (element) => {
                var url = 'http://localhost:3002/textos/categoria/' + element
                const response = await axios.get(url);
                return response.data
            })
        )
        console.log(ret)  // 此时可正常拿到完整数据
        return ret
    }
    catch(error){
        console.error(error)
    }
}

如果你的场景需要按顺序串行发送请求，不需要并发，也可以用for...of循环实现：

var ret = []
for (const element of catRandom) {
  var url = 'http://localhost:3002/textos/categoria/' + element
  const response = await axios.get(url);
  ret.push(response.data)
}
console.log(ret)

内容的提问来源于stack exchange，提问作者v i t o r m u g n o l