Vue.js vuejs应用程序中异步axios调用的多个响应的竞争条件

我正在Vue.js应用程序中运行多个axios.get（）调用。我想调用另一个函数

this.useData()

在所有回迁都收到响应之后。我该怎么做？我读过有关承诺的书。如果这对我有帮助，请建议如何将Promise.all合并到我的代码中

fetchData() {
  for (let j = 0; j < this.selectedLayers.length; j++) {
    if (this.selectedLayers[j].foo == true) {
      axios
        .get("/maps")
        .then(
          response => {
            console.log(
              "received response for this.selectedLayers[" + j + "]"
            );
            this.selectedLayers[j].data= response.data;
          },
          error => {
            console.log("error fetching data");
          }
        );
    }
  }
  this.useData();

在阅读了论坛推荐的第一个答案后，我修改了我的代码如下

fetchData() {
  return new Promise(resolve => {
    if (this.selectedLayers[j].foo == true) {
      axios
        .get("/maps")
        .then(
          response => {
            console.log(
              "received response for this.selectedLayers[" + j + "]"
            );
            this.selectedLayers[j].data= response.data;
          },
          error => {
            console.log("error fetching data");
          }
        );
  }
 })};

  let promises = [];
  for (var i = 0; i < this.selectedLayers.length; i++) {
    promises.push(this.fetchData(i));
  }

  Promise.all(promises)
    .then(results => {
      this.useData();
    })
    .catch(e => {
      // Handle errors here
    });

fetchData（）{
返回新承诺（解决=>{
if（this.selectedLayers[j].foo==true）{
axios
.get（“/maps”）
.那么(
响应=>{
console.log(
“已收到对此的响应。selectedLayers[“+j+”]””
);
此.selectedLayers[j].data=response.data；
},
错误=>{
log（“获取数据时出错”）；
}
);
}
})};
让承诺=[]；
对于（var i=0；i{
这个.useData（）；
})
.catch（e=>{
//在这里处理错误
});

Promise.all（）永远不会执行。我认为将Promise.all（）与axios.get（）结合使用会有细微差别？

async fetchData（）{
让承诺=[]；
for（设j=0；j{
console.log(
“已收到对此的响应。selectedLayers[“+j+”]””
);
此.selectedLayers[j].data=response.data；
},
错误=>{
log（“获取数据时出错”）；
}
);
承诺。推动（promisersesp）；
}
}
试一试{
const results=wait Promise.all（promises）；//这里也可以使用承诺链接
}捕获（e）{
控制台日志（e）；
}
这个.useData（）；
}

阅读有关异步fetchData（）的更多信息{ 让承诺=[]； for（设j=0；j{ console.log( “已收到对此的响应。selectedLayers[“+j+”]”” ); 此.selectedLayers[j].data=response.data； }, 错误=>{ log（“获取数据时出错”）； } ); 承诺。推动（promisersesp）； } } 试一试{ const results=wait Promise.all（promises）；//这里也可以使用承诺链接 }捕获（e）{ 控制台日志（e）； } 这个.useData（）； }

---

了解更多信息，

这里是一个你可以尝试的黑客解决方案。创建名为

counter

的

data

属性，并在每次

axios

调用完成后递增该属性

Watch

此属性，当它到达所需计数器时，将其重置，并调用

this.userData（）

函数。

这里有一个黑客解决方案，您可以尝试。创建名为

counter

的

data

属性，并在每次

axios

调用完成后递增该属性

Watch

this属性，当它到达所需计数器时，重置它并调用

this.userData（）

函数。

查看此问题查看此问题

fetchData() {
  return new Promise(resolve => {
    if (this.selectedLayers[j].foo == true) {
      axios
        .get("/maps")
        .then(
          response => {
            console.log(
              "received response for this.selectedLayers[" + j + "]"
            );
            this.selectedLayers[j].data= response.data;
          },
          error => {
            console.log("error fetching data");
          }
        );
  }
 })};

  let promises = [];
  for (var i = 0; i < this.selectedLayers.length; i++) {
    promises.push(this.fetchData(i));
  }

  Promise.all(promises)
    .then(results => {
      this.useData();
    })
    .catch(e => {
      // Handle errors here
    });

async fetchData() {
  let promises = [];
  for (let j = 0; j < this.selectedLayers.length; j++) {
    if (this.selectedLayers[j].foo == true) {
      let promiseRep = axios
        .get("/maps")
        .then(
          response => {
            console.log(
              "received response for this.selectedLayers[" + j + "]"
            );
            this.selectedLayers[j].data= response.data;
          },
          error => {
            console.log("error fetching data");
          }
        );
      promises.push(promiseResp);  
    }
  }
  try{
    const results = await Promise.all(promises); //you can use promise chaining here too
  } catch(e){
    console.log(e);
  }
  this.useData();
}