Vue: axios在多个组件上同步执行而不是异步执行

Question

在创建组件时，我试图加载ajax数据，但是，这似乎使其他项目也通过ajax加载同步加载，而不是在执行以下命令时异步加载，此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调用完成。

编辑

你能用你的另一次尝试试试吗？

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