vue中循環(huán)請求接口參數(shù)問題及解決
更新時間：2022年08月13日 14:33:50 作者：STARSHOME火星
這篇文章主要介紹了vue中循環(huán)請求接口參數(shù)問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue 循環(huán)請求接口參數(shù)問題
今天遇到一個循環(huán)請求問題
先上代碼
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都是不一樣的，在接口里面打印，每次都是一樣的，這導(dǎo)致每次接口的請求參數(shù)都是一樣，獲取的數(shù)據(jù)也是一樣。
搞了半天才找到原因，修改如下
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是同步請求，每次循環(huán)都會執(zhí)行請求
vue for循環(huán)請求同一url參數(shù)不同但參數(shù)覆蓋
今天搞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
? ? ? ? ? ? ? ? // 分次請求軌跡數(shù)據(jù)
? ? ? ? ? ? ? ? let targetIdParam = item['targetId']
? ? ? ? ? ? ? ? self.queryTrajParams['targetId'] = targetIdParam
? ? ? ? ? ? ? ? self.queryTrajParams['sourceId'] = null
? ? ? ? ? ? ? ? console.log('targetId參數(shù)', targetIdParam)
? ? ? ? ? ? ? ? console.log('queryTrajParams', self.queryTrajParams)
? ? ? ? ? ? ? ? axios.get(serviceUrl.trajectoryDataUrl, {
? ? ? ? ? ? ? ? ? params: self.queryTrajParams
? ? ? ? ? ? ? ? }).then(res => {....省略
發(fā)現(xiàn)network請求的url參數(shù)同一個，而且都是最后一個，看來是參數(shù)被覆蓋了，我是Java出身，碰到這種問題一臉懵逼
是一枚前端小菜雞，不過我隱約發(fā)現(xiàn)是參數(shù)的類型原因，然后我試了下基本數(shù)據(jù)類型，只傳number類型，果然能傳成功
看來就是對self.queryTrajParams進行一下轉(zhuǎn)換
?let queryParam = JSON.parse(JSON.stringify(self.queryTrajParams))
使用let 對參數(shù)進行重定義，let會生成一份臨時傀儡代碼塊，每次都會生成??！
axios.get(serviceUrl.trajectoryDataUrl, {
? ? ? ? ? ? ? ? ? params: queryParam?
? ? ? ? ? ? ? ? }).then(res => {然后完美解決問題??！
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
本文主要介紹了vue-router4版本第一次打開界面不匹配路由問題解決，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
這篇文章主要和大家一起簡單學(xué)習(xí)一下vue指令：directive，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
vue3+element-plus?Dialog對話框的使用與setup?寫法的用法
這篇文章主要介紹了vue3+element-plus?Dialog對話框的使用?與?setup?寫法的使用,本文通過兩種方式結(jié)合實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-04-04
這篇文章主要給大家介紹了關(guān)于Vue前端高效開發(fā)之列表渲染指令的相關(guān)資料,vue.js 使用的是 v-for 指令來處理組件元素的循環(huán)迭代邏輯,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-06-06
本文主要介紹了vue實現(xiàn)兩列水平時間軸的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
這篇文章主要介紹了vue中如何去掉空格的方法實現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
這篇文章主要介紹了vue項目熱更新的坑及解決方案，具有很好的參考價值，希望對的大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
使用element-ui設(shè)置table組件寬度(width)為百分比
這篇文章主要介紹了使用element-ui設(shè)置table組件寬度(width)為百分比方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要介紹了Vue事件符.capture的含義及用法說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
最近公司開發(fā)一個項目,采用的前后端分離的方式,前端采用vue,但是再項目開發(fā)過程中遇到一個比較麻煩的問題,下面這篇文章主要給大家介紹了關(guān)于vue?ui的安裝步驟以及使用的相關(guān)資料,需要的朋友可以參考下2022-08-08