Vue requests asynchronously multiple times in one component, and the result overrides each other.

in the vue project, I used axios to request two interfaces asynchronously in created () of a component, and the results were strange, but the two results returned covered each other, and only a few times the correct results were received correctly.

looked it up on the Internet and saw that you can use the all () method of axios, or use Promise. But. As a result, there is still a situation of covering each other.

Code:

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

and the method of using Promise has also been tried:

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

returns the result: the data returned by the two interfaces should be an array of length 2 and an array of length 1

the result is received as follows

main.jsaxios

I don"t know how to solve it, or where I wrote a problem, ask for help from all the bosses.

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