Я пытаюсь выполнить 3 функции, а после console.log значения, которые они меняют. Я думаю, что для такого рода проблем должен быть лучший подход, но я не уверен, что это такое. Что я сделал, так это то, что я пошел старой школой и добавил флаг загрузки. По сути, loading = 3, когда функция загружена, loading--

Я хотел бы продемонстрировать свой текущий код (ну, на самом деле это не то же самое, но он будет работать в демонстрационных целях) , чтобы вы могли почувствовать:

data:() => ({
  loading: 3,
  first: null,
  second: null,
  third: null
}),

methods: {
  first() {
    this.$route.get('/data/for/first').then(response => {
      this.first = response.data;
      this.loading--;
    })
  },
  second() {
    this.$route.get('/data/for/second').then(response => {
     this.second = response.data;
     this.loading--;
    })
  },
  third() {
    this.$route.get('/data/for/third/a').then(responseA => {
      let thirdA = responseA.data;
      this.$route.get('/data/for/third/b').then(responseB => {
        let thirdB = responseB.data;

        if (thirdA === thirdB) {
          this.third = true;
        }

        this.loading--;
      })
    })
  },
  fireFunctions() {
    this.first();
    this.second();
    this.third();
  }
},

watch: {
  loading: function() {
      if (this.loading === 0) {
          console.log(this.first, this.second, this.third)
      }
   }
}

Результат выглядит так:

dataForFirst, dataForSecond, dataForThird;

Но, если я не использую наблюдатель и загружаю this.fireFunctions () в mount (), я получаю:

dataForFirst, dataForSecond, undefined;

Насколько я понимаю, это происходит потому, что this.third () требуется больше времени для обработки данных. Как видно из кода, я добавил флаг загрузки. Таким образом, функции огня будут выполняться только тогда, когда все функции загружены. Я не думаю, что это лучший подход, поэтому хотел бы услышать ваше мнение по этому поводу.

Как бы вы с этим справились?

1
boka18 23 Сен 2018 в 03:38

1 ответ

Лучший ответ

Используйте Promise.all. чтобы дождаться возврата всех ваших асинхронных функций, а затем запустить любой код, который вам нужен, например:

methods: {
  async all() {
    let [first, second, third] = await Promise.all([
      this.$route.get('/data/for/first'),
      this.$route.get('/data/for/second'),
      this.$route.get('/data/for/third')
    ]);
    this.first = first;
    this.second = second;
    this.third = third;
    console.log(first, second, third);
  }
}
2
pretzelhammer 23 Сен 2018 в 00:44