Состояние гонки с несколькими ответами от асинхронных вызовов ax ios в приложении vuejs

Question

В моем приложении Vue. js выполняется несколько вызовов ax ios .get (). Я хотел бы вызвать другую функцию

this.useData()

после того, как все выборки получили ответы. Как я могу это сделать? Я читал о Promise.all (). Если это поможет мне, пожалуйста, посоветуйте, как включить 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();

Если я добавлю async и await к моему коду, как показано ниже, Vue. js отвечает с ошибкой ...

Нельзя использовать ключевое слово 'await' вне функции asyn c

  await this.fetchData();
  this.useData();


async fetchData() {
  for (let j = 0; j < this.selectedLayers.length; j++) {
    if (this.selectedLayers[j].foo == true) {
      await 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");
          }
        );
    }
  }

После прочтения форума первый ответ здесь рекомендуется изменить код следующим образом ...

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
    });

Promise.all () никогда не выполняется. Я предполагаю, что есть нюанс с использованием Promise.all () в тандеме с топором ios .get ()?

Answer 1

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();
}

Подробнее о Promise.all () ,

Answer 2

Вот хакерское решение, которое вы можете попробовать. Создайте свойство data с именем counter и увеличивайте его после завершения каждого вызова axios. Watch это свойство, и когда оно достигает желаемого счетчика, сбросьте его и вызовите функцию this.userData().