vue在一个组件内多次异步请求，结果相互覆盖？

Question

在vue的项目中，我在一个组件的created()内使用axios异步请求了两个接口，结果很奇怪的但是，返回的两个结果存在相互覆盖的情况，只有很少几次能正确接收到正确的返回结果。

在网上查了一下，看到说可以使用axios的all()方法，或者是用Promise。但..... 结果还是出现了相互覆盖的情况。

代码入下：

created () {
    this.initData();
},
methods: {
    initData () {
        this.$http.all([
        this.$http.get('/api/test1'),
        this.$http.get('/api/test2', {
          params: { id: 123 }
        })
      ]).then(this.$http.spread((res1, res2) => {
        console.log(res1)
        console.log(res2)
      }));
    }
  }

还有用Promise的方法也试过了：

methods: {
    initData () {
      Promise.all([
        this.$http.get('/api/test1'),
        this.$http.get('/api/test2', {
          params: { id: 123 }
        })
      ]).then(([res1, res2]) => {
          console.log(res1)
          console.log(res2)
      });
    }
}

返回结果：两个接口返回的数据应该是，一个长度为2的数组，一个长度为1的数组

结果收到的是这样的

这是相关版本

main.js里axios的调用

不知道怎么解决，还是我哪个地方写的有问题，求助各位大佬。

Answer 1

你这个写的没感觉啥问题，是接口数据的问题吧

Answer 2

两个结果异步，冲突了。

function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}
axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // Both requests are now complete
  }));

注意后面的axios.spread