鍍金池/ 問(wèn)答/Java  HTML/ vue在一個(gè)組件內(nèi)多次異步請(qǐng)求，結(jié)果相互覆蓋？

vue在一個(gè)組件內(nèi)多次異步請(qǐng)求，結(jié)果相互覆蓋？

在vue的項(xiàng)目中，我在一個(gè)組件的created()內(nèi)使用axios異步請(qǐng)求了兩個(gè)接口，結(jié)果很奇怪的但是，返回的兩個(gè)結(jié)果存在相互覆蓋的情況，只有很少幾次能正確接收到正確的返回結(jié)果。

在網(wǎng)上查了一下，看到說(shuō)可以使用axios的all()方法，或者是用Promise。但..... 結(jié)果還是出現(xiàn)了相互覆蓋的情況。

代碼入下：

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的方法也試過(guò)了：

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

返回結(jié)果：兩個(gè)接口返回的數(shù)據(jù)應(yīng)該是，一個(gè)長(zhǎng)度為2的數(shù)組，一個(gè)長(zhǎng)度為1的數(shù)組

結(jié)果收到的是這樣的

clipboard.png

clipboard.png

這是相關(guān)版本

clipboard.png

main.js里axios的調(diào)用
clipboard.png

不知道怎么解決，還是我哪個(gè)地方寫的有問(wèn)題，求助各位大佬。

回答
編輯回答
青瓷

兩個(gè)結(jié)果異步，沖突了。

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

2017年1月15日 10:04
編輯回答
不歸路

你這個(gè)寫的沒(méi)感覺(jué)啥問(wèn)題，是接口數(shù)據(jù)的問(wèn)題吧

2017年3月14日 07:50