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

我试图在创建组件时加载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
  }
}

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

从ajax调用加载此组件所需的时间少于一秒钟：

组件2.vue

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

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有没有办法做到这一点？
您是否尝试过不使用
wait
？
await
表达式会导致
async
函数执行暂停，直到承诺兑现，这会导致其他项挂起，直到ajax调用完成

编辑

你能再试试这个吗

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

在
then
部分中使用的回调函数使用ES5表示法，其中关键字
this
的作用域仅限于该方法。使用ES6表示法就可以了。或者，您可以将
这个
保存到一个新变量中，并相应地像这样处理它

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

虽然，（对我来说）最好的做法是在
mounted（）
中更新模型，而不是在
created（）
中更新模型。你也可以用新试用的东西检查这个编辑过的版本。将它移动到mounted可以修复问题。但是，如果我全部移动到mounted中，它会做同样的事情。奇怪！我让它在
created（）
中工作，使用这个虚拟api，我所有的ajax调用都可以工作，它只是同步运行它们，而不是异步运行。这就是我所说的挂起的意思。。。