VueJs - данные из вызова API не достигают 2-го вызова API в первый раз - PullRequest
Новая
       11

VueJs - данные из вызова API не достигают 2-го вызова API в первый раз

0 голосов
/ 19 апреля 2020

У меня есть 2 вызова API, второй вызов выполняется с интервалом в x секунд и зависит от данных, поступающих из первого вызова. Теперь я хочу, чтобы в первый раз этот интервал был запущен мгновенно, и я не могу заставить его работать должным образом.

Произошли некоторые поиски и, по-видимому, есть несколько решений для этого, и я попытался:
- Запустить Функция один раз до интервала
- setTimeout в функции

Эти параметры должны работать, но по какой-то причине данные первого вызова, которые мне нужны для второго вызова, не поступают туда. 

created() {
  this.fetchId();
  this.fetchItems(); //this doesn't get the id set in fetchId()
  setInterval(
    function() {
      this.fetchItems();
    }.bind(this),
    50000
  );
},
methods: {
  fetchId() {
    axios
      .get("two/id")
      .then(response => {
        this.id = response.data.id;
      })
      .catch(error => {
        console.log(error);
      });
  },
  fetchItems() {
    axios
      .get("one/api/public-stash-tabs?id=" + this.id)
      .then(response => {
        //do something
      })
      .catch(error => {
        console.log(error);
      });
  }
}

Таким образом, этот this.id, который мне нужен в fetchItems (). Ax ios .get (..), не работает при первом запуске до интервала. Все работает нормально, когда я удаляю этот вызов функции и просто жду первые x секунд.

1 Ответ

2 голосов
/ 19 апреля 2020

Это происходит потому, что axios.get(...) является асинхронным вызовом, что означает, что метод fetchId() будет выполняться в фоновом режиме, а метод fetchItems() вызывается сразу после fetchId() даже до установки this.id, поэтому в fetchItems() метод this.id всегда неопределен. Вы можете исправить это, используя async/await, например: 

created() {
    this.init();            // use a wrapper method here
  },
  methods: {
    async init() {          // using async method here
      await this.fetchId(); // wait for fetchId call to finish
      this.fetchItems();
    },
    fetchId() {
      return axios          // return the promise here, so that we can await on it
        .get("two/id")
        .then(response => {
          this.id = response.data.id;
        })
        .catch(error => console.log(error));
    },
    fetchItems() {
      axios
        .get("one/api/public-stash-tabs?id=" + this.id)
        .then(response => {
          //do something
        })
        .catch(error => console.log(error));
    }
  }
...