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
  }
}

这两个应加载asyncronusly，但不会，/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()模型

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

修改

1 个答案: