vue中axios解决get请求传输数据是数组格式问题（转载）

1、问题

示例代码

let params = {
 statusList: ['OVERDUE', 'DELAY']
}

this.$http.get('/list', params)
.then(res => {})
.catch(e => {})

上述代码在不做配置的时候请求信息为：/list?statusList[]=OVERDUE&statusList[]=DELAY对于后端来说，statusList[]形式的提交是无效的，实际需要的是/list?statusList=OVERDUE&statusList=DELAY这种方式的提交。那么我们应该如何来解决这种问题呢？
————————————————

2、解决方案

2.1 qs插件

qs主要是增加一些安全性的查询字符串解析和序列化字符串的库，qs的更多使用方式可以参考总结中提供的地址学习

1、qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'indices' })
// 输出结果：'a[0]=b&a[1]=c'
2、qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'brackets' })
// 输出结果：'a[]=b&a[]=c'
3、qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'repeat' })
// 输出结果：'a=b&a=c'
4、qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'comma' })
// 输出结果：'a=b,c'

qs的parse()使用
如果接口需要获取get请求接口的请求数据，可以使用parse()，将拼接在地址的参数数据转换为对象

let url = "111.111.3.203:8080/getList?id=1&name=huahua&arr=a&arr=b"
let splitObj = url.split('?')[1]
qs.parse(splitObj )   //{ id: '1', name: 'huahua', arr: ['a','b'] }

qs.stringify和JSON.stringify的区别

let obj = { a: 1, b: 2 }
qs.stringify(obj)   //a=1&b=2
JSON.stringify(obj)  // "{'a': 1, 'b': 2}"

 

上述我们列举了qs中的序列化几种配置，其中{ arrayFormat: 'repeat' }的序列化结果满足我们的条件

2.2 axios配置

axios中有一个专门对数据进行序列化的配置属性paramsSerializer

 paramsSerializer: function(params) {
   return Qs.stringify(params, {arrayFormat: 'repeat'})
 },

2.3 具体配置

我们可以在axios请求拦截器中对参数进行序列化配置

 import qs from 'qs'

 ....

axios.interceptors.request.use(async (config) => {
//只针对get方式进行序列化
 if (config.method === 'get') {
   config.paramsSerializer = function(params) {
     return qs.stringify(params, { arrayFormat: 'repeat' })
   }
 }
}

也可以单独对某一次请求进行配置

this.arr = [1,2,3]
//写法一,直接使用qs的stringify()
this.$http.get('url地址', {
    params: {
        arr: this.$qs.stringify(this.arr)   //数组拼接在url地址  url地址?arr=1&arr=2&arr=3
    }
}).then(() => {
})  

//写法二 ，使用axios提供的paramsSerializer序列化函数
this.$http.get('url地址', {
    params: {
        arr: this.arr   //数组拼接在url地址  url地址?arr=1&arr=2&arr=3
    },
    paramsSerializer: (params) => {
        return this.$qs.stringify(params)  
    }
}).then(() => {
}) 

 

2.3 插件安装

npm install qs 
npm install axios -S 

在main.js中引入qs 进行全局挂载，或者只需要在填写 axios 拦截器的位置导入

    import Vue from 'vue'
    import qs from 'qs'
    import axios from 'axios'
    Vue.prototype.$qs = qs;   //qs全局挂载在vue实例上
    Vue.prototype.$http = axios;  //axios全局挂载在vue实例上

 

插件地址：https://www.npmjs.com/package/qs

 

版权声明：本文为CSDN博主「鸡蛋壳儿」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/cradle2006/article/details/102986466

参考链接：https://blog.csdn.net/weixin_40509884/article/details/100077390