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

 更新时间:2022年08月13日 14:33:50   作者:STARSHOME火星  
这篇文章主要介绍了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 => {

然后完美解决问题!!

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

相关文章

  • uniapp开发打包多端应用完整方法指南

    uniapp开发打包多端应用完整方法指南

    这篇文章主要介绍了uniapp开发打包多端应用完整流程指南,包括了uniapp打包小程序,uniapp打包安卓apk,uniapp打包IOS应用,需要的朋友可以参考下
    2022-12-12
  • 如何为vue的项目添加单元测试

    如何为vue的项目添加单元测试

    这篇文章主要介绍了如何为vue的项目添加单元测试,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • Vue使用echarts定制特殊的仪表盘

    Vue使用echarts定制特殊的仪表盘

    这篇文章主要为大家详细介绍了Vue使用echarts定制特殊的仪表盘,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • 巧用Vue.js+Vuex制作专门收藏微信公众号的app

    巧用Vue.js+Vuex制作专门收藏微信公众号的app

    这篇文章主要为大家详细介绍了vue自定义指令三步如何实现数据拉取更新,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-11-11
  • 解决iview多表头动态更改列元素发生的错误的方法

    解决iview多表头动态更改列元素发生的错误的方法

    这篇文章主要介绍了解决iview多表头动态更改列元素发生的错误的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • vue滚动插件better-scroll使用详解

    vue滚动插件better-scroll使用详解

    这篇文章主要为大家详细介绍了vue滚动插件better-scroll,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-10-10
  • vue实现用户长时间不操作自动退出登录功能的实现代码

    vue实现用户长时间不操作自动退出登录功能的实现代码

    这篇文章主要介绍了vue实现用户长时间不操作自动退出登录功能的实现代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-07-07
  • Vue使用driver.js做引导页

    Vue使用driver.js做引导页

    Driver.js是一个功能强大且高度可定制的基于原生JavaScript开发的新用户引导库,本文主要介绍了Vue使用driver.js做引导页,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-02-02
  • Vue 2.0+Vue-router构建一个简单的单页应用(附源码)

    Vue 2.0+Vue-router构建一个简单的单页应用(附源码)

    这篇文章主要给大家介绍了基于Vue 2.0+Vue-router构建了一个简单的单页应用,文中通过实例介绍的非常详细,并在文末给出了源码下载,需要的朋友可以下载学习参考,下面来一起看看吧。
    2017-03-03
  • 关于Vue中的watch监视属性

    关于Vue中的watch监视属性

    这篇文章主要介绍了关于Vue中的watch监视属性,Vue中的watch默认不监视对象内部值的改变,当被监视的属性变化时,回调函数自动调用,进行相关操作,需要的朋友可以参考下
    2023-04-04

最新评论