Vue: Axios выполняется синхронно, а не асинхронно на нескольких компонентах

Question

Я пытаюсь загрузить ajax-данные при создании моего компонента, однако, кажется, что другие элементы, которые также загружаются через ajax в created(), загружаются синхронно, а не асинхронно, когда выполняется следующее, этот запрос ajax занимает около 2 несколько секунд, чтобы запустить все после загрузки в синхронном стиле.

Загрузка следующего компонента из вызова ajax занимает около 2 секунд:

component1.vue

export default {
  data: () => {
    return { balance: { chips: 0, coins: 0, rewards: 0 } }
  },
  async created() {
    this.balance = (await axios.get('/api/player/balance')).data
  }
}

Этот компонент загружается из вызова ajax менее чем за секунду:

component2.vue

export default {
  data: () => {
    return { items: [] }
  },
  async created() {
    this.items = (await axios.get('/api/items')).data
  }
}

Оба должны загружаться асинхронно, но они этого не делают, /api/player/balance запускается, затем /api/items запускается.

Я также пытался использовать .then() так же:

export default {
  data: () => {
    return { balance: { chips: 0, coins: 0, rewards: 0 } }
  },
  created() {
    axios.get('/api/player/balance').then(function (response) {
      this.balance = response.data
    })
  }
}

Когда я обертываю this.balance = ... в setTimeout, другие элементы загружаются нормально.

Есть ли лучший способ реализовать такой синхронный запрос ajax?

Редактировать

Использование fetch решает проблему загрузки запросов синхронно и позволяет им загружаться асинхронно.

export default {
  data: () => {
    return { balance: { chips: 0, coins: 0, rewards: 0 } }
  },
  async created() {
    let response = await fetch('/api/player/balance')
    this.balance = await response.json()
  }
}

Есть ли способ сделать это с axios?

Answer 1

Вы пробовали без await? Выражение await приводит к приостановке выполнения функции async до тех пор, пока не будет выполнено обещание, то есть другие ваши элементы будут зависать до завершения вызова ajax

EDIT

Можете ли вы попробовать это с другой вашей попыткой?

axios.get('/api/player/balance').then((response) => {
  this.balance = response.data
});

Функция обратного вызова, которую вы использовали в части then, использует нотацию ES5, где ключевое слово this будет ограничено только этим методом. переход на обозначение ES6 будет делать. Или вы можете удерживать this в новой переменной и работать с ней следующим образом

const self = this;
axios.get('/api/player/balance').then(function(response) {
  self.balance = response.data
});

Хотя лучшая практика (для меня) - обновить модель в mounted(), отличном от created()