vue中循環請求接口參數問題及解決

Posted on by

vue 循環請求接口參數問題

今天遇到一個循環請求問題

先上代碼

function(){
      var num = this.eventType.length;
      for (var i = 0; i < num; i++) {
        arr.eventType = this.eventType[i];
        console.log(arr.eventType, i, "arr");
        this.getChart(arr);
        this.getPie(arr);
      }
}
    getChart(arr) {
    //接口請求
    },
    getPie(arr) {
    //接口請求
    },

問題出在eventype上，在接口請求前打印出的eventype都是不一樣的，在接口裡面打印，每次都是一樣的，這導致每次接口的請求參數都是一樣，獲取的數據也是一樣。

搞瞭半天才找到原因，修改如下

async function(){
      var num = this.eventType.length;
      for (var i = 0; i < num; i++) {
        arr.eventType = this.eventType[i];
        console.log(arr.eventType, i, "arr");
        await this.getChart(arr);
        await this.getPie(arr);
      }
}
    async getChart(arr) {
    await //接口請求
    },
    async getPie(arr) {
    await //接口請求
    },

這下就ok瞭。

原因在於async是同步請求，每次循環都會執行請求

vue for循環請求同一url參數不同但參數覆蓋

今天搞Vue 遇到一個比較怪異的問題，看代碼

let self=this
for (let i = 0; i < data.length; i++) {
                let item = data[i]
                item['id'] = i + 1// 賦值序號
                item['similarity'] = parseFloat(item['similarity']).toFixed(2)
                // }
                this.resembleData = data
                // 分次請求軌跡數據
                let targetIdParam = item['targetId']
                self.queryTrajParams['targetId'] = targetIdParam
                self.queryTrajParams['sourceId'] = null
                console.log('targetId參數', targetIdParam)
                console.log('queryTrajParams', self.queryTrajParams)
                axios.get(serviceUrl.trajectoryDataUrl, {
                  params: self.queryTrajParams
                }).then(res => {

….省略 

發現network請求的url參數同一個，而且都是最後一個，看來是參數被覆蓋瞭，我是Java出身，碰到這種問題一臉懵逼

是一枚前端小菜雞，不過我隱約發現是參數的類型原因，然後我試瞭下基本數據類型，隻傳number類型，果然能傳成功

看來就是對self.queryTrajParams進行一下轉換

 let queryParam = JSON.parse(JSON.stringify(self.queryTrajParams))

使用let 對參數進行重定義，let會生成一份臨時傀儡代碼塊，每次都會生成！！

axios.get(serviceUrl.trajectoryDataUrl, {
                  params: queryParam 
                }).then(res => {

然後完美解決問題！！

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。

推薦閱讀：