使用axios进行for循环，我怎么知道是否所有数据都已加载

Question

this.allMyFacilities = response[1].data          for (let i = 0; i < this.allMyFacilities.length; i++) {            axios              .get(facilityUsed(this.allMyFacilities[i].id))              .then((response) => {                this.facilitiesOnSupplyChain[this.allMyFacilities[i].id] = response.data              })              .catch((err) => {                // An error will also be thrown if you use cancel.                console.error(err)              })          }我有这样的代码。我不知道我有多少设施。那就是我循环它，但每个设施都有自己的 Axios。我想知道如何知道循环中的所有数据都已完全加载

Answer 1

您可以为此使用Promise.all：

this.allMyFacilities = response[1].data

const promises = this.allMyFacilities.map((myFacility) => {

    return axios

        .get(facilityUsed(myFacility.id))

        .then((response) => {

            this.facilitiesOnSupplyChain[myFacility.id] = response.data

            return response.data;

        }).catch((err) => {

            // An error will also be thrown if you use cancel.

            console.error(err)

        });

});

Promise.all(promises).then((allResponsesArray) => /* do sth */)

Answer 2

假设所有异步调用都可以独立进行，您可以利用该Promise.all功能来实现这一点。

this.allMyFacilities = response[1].data

await Promise.all(this.allMyFacilities.map(myFacility) => {

  return axios.get(facilityUsed(myFacility.id))

    .then(data => this.facilitiesOnSupplyChain[myFacility.id] =  data);

});

这将允许您axios并行执行所有调用，从而减少整个过程的总体执行时间。

PS：我已经写了一个await声明，假设你将把这个功能包装在一个async函数中。