vue中循环请求接口参数问题及解决
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.js 使用v-if v-else发现没有执行解决办法
这篇文章主要介绍了vue.js 使用v-if v-else发现没有执行解决办法的相关资料,需要的朋友可以参考下2017-05-05vue3 element-plus 实现表格数据更改功能详细步骤
这篇文章主要介绍了vue3 element-plus实现表格数据更改功能,本文分步骤结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-07-07使用form-create动态生成vue自定义组件和嵌套表单组件
这篇文章主要介绍了使用form-create动态生成vue自定义组件和嵌套表单组件,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2019-01-01
最新评论