vue中循环请求接口参数问题及解决

目录 vue 循环请求接口参数问题 vue for循环请求同一url参数不同但参数覆盖

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 => {

然后完美解决问题！！

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。

查看更多关于vue中循环请求接口参数问题及解决的详细内容...