仅嵌套 Axios 调用 Returns 数组的第一个值

Question

我将一个 Axios 调用嵌套在另一个调用中，以便从我的第一个调用中获取 ID 列表，然后循环并为每个 ID 从第二次 API 调用中获取状态。当我记录数组时，它只会 return 第一个状态，而不是显示完整的数组。

我认为问题可能出在 promise 链中...或者如果这不是在输出最终数组之前等待 promise 完成。

    var responsearray = [] 
    
    axios.get('https://myapi.net/api/role/allroles?pageSize=1000').then(function (response) {

    for(var i = 0; i < response.data.roles.length; i++)
    {
        var entry = response.data.roles[i];
        var entryid = entry.id;

        return axios.get('https://myapi.net/api/role/score/' + entryid).then(function (response2) {
               // Nested call per role to push to array
               responsearray.push(response2.status)
    });
    }

  }).catch(function (error) {
    // handle error
    console.log(error);

  }).then(function () {
    // always executed
        // Return Array
    console.log(responsearray);
  });

Answer 1

看起来外部承诺正在解决，因为您正在返回一个值（这是第一个内部承诺，循环内的第一个 Axios 调用）。

然后，当外层承诺解决时，外层 then 函数被调用， responsearray 恰好保存第一个 response2 的结果（但它甚至可能为空，因为第二个 Axios 调用可能尚未解决）。

所以流程是这样的：

First axios call => first Then is called => i=0, second axios call is **RETURNED** => first axios call is resolved => last then is called => (second axios may be resolved by now and responsearray is filled with the result for i=0) => console.log(responsearray)

无论如何，我建议使用 Promise.all，它为您提供一个包含一系列承诺的承诺，并且仅当所有承诺都已解决时才解决它。您可以阅读更多相关信息 here。

我会这样使用它：

var responsearray = [] 
    
axios.get('https://myapi.net/api/role/allroles?pageSize=1000').then(function (response) {

    for(var i = 0; i < response.data.roles.length; i++)
    {
        var entry = response.data.roles[i];
        var entryid = entry.id;

        //pushing the promise into responsearray
        responsearray.push(axios.get('https://myapi.net/api/role/score/' + entryid).then(function (response2) {
              console.log(i + " resolved");
        }).catch(function (error) {
    // handle error
    console.log(error);
});
    })
    console.log("Done pushing all the promises");
    return responsearray;

}).catch(function (error) {
    // handle error
    console.log(error);
}).then(function (responsearray) {
    console.log("outer axios is resolved");
    // responsearray should have all the promises by now
    Promise.all(responsearray).then((results) => {
       console.log(results);
    }).catch(function (error) {
    // handle error
    console.log(error);
});
});

Answer 2

如果您知道您将拥有一组 Promise，请使用 Promise class 提供的方法来处理它。

例如，您可以使用类似 Promise.all() 的方法来处理数组：

var responsearray = [] 
        
axios.get('https://myapi.net/api/role/allroles?pageSize=1000').then(
    function (response) {
        for(var i = 0; i < response.data.roles.length; i++)
        {
            // get a single Promise and append it to our collection
            responsearray.push(axios.get('https://myapi.net/api/role/score/' + response.data.roles[i])
        }
    }
)
Promise.all(responsearray)
    .then( responses => responsearray = doSomethingWith(responses) )
    .catch(function (error) {
        // handle error
        console.log(error);
    })
    .then(function () {
        // always executed
        // Return Array
        console.log(responsearray);
    });

这可能不完全适合您的用例，因为 Promise.all() 是全有或全无（参见）。还有其他选项，例如 Promise.allSettled()

仅嵌套 Axios 调用 Returns 数组的第一个值

Nested Axios Call Only Returns First Value to Array

javascript

es6-promise

axios