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

Question

我试图在创建我的组件时加载 ajax 数据，但是，这似乎使得在 created() 中也通过 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 函数执行暂停，直到 Promise 完成，这导致您的其他项目挂起，直到 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() 中