我试图在创建组件时加载ajax数据，但是，这似乎使得在created()中也通过ajax加载的其他项目在执行以下命令时同步加载而不是异步加载，这个 ajax 请求大约需要 2 秒才能运行，导致之后的所有内容都以同步方式加载。

以下组件从 ajax 调用加载大约需要 2 秒:

组件1.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做到这一点？

请您参考如下方法:

您是否尝试过不使用 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()