vue中axios解决get请求传输数据是数组格式问题（转载）
⽰例代码
let params = {
statusList: ['OVERDUE', 'DELAY']
}
this.$('/list', params)
.then(res => {})
.catch(e => {})
上述代码在不做配置的时候请求信息为：/list?statusList[]=OVERDUE&statusList[]=DELAY对于后端来说，statusList[]形式的提交是⽆效的，实际需要的是/list? statusList=OVERDUE&statusList=DELAY这种⽅式的提交。那么我们应该如何来解决这种问题呢？
————————————————
后端字符串转数组
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' }的序列化结果满⾜我们的条件
axios中有⼀个专门对数据进⾏序列化的配置属性paramsSerializer
paramsSerializer: function(params) {
return Qs.stringify(params, {arrayFormat: 'repeat'})
},
我们可以在axios请求中对参数进⾏序列化配置
import qs from 'qs'
....
quest.use(async (config) => {
//只针对get⽅式进⾏序列化
if (hod === 'get') {
config.paramsSerializer = function(params) {
return qs.stringify(params, { arrayFormat: 'repeat' })
}
}
}
也可以单独对某⼀次请求进⾏配置
this.arr = [1,2,3]
//写法⼀，直接使⽤qs的stringify()
this.$('url地址', {
params: {
arr: this.$qs.stringify(this.arr)  //数组拼接在url地址  url地址?arr=1&arr=2&arr=3
}
}).then(() => {
})
//写法⼆，使⽤axios提供的paramsSerializer序列化函数
this.$('url地址', {
params: {
arr: this.arr  //数组拼接在url地址  url地址?arr=1&arr=2&arr=3
},
paramsSerializer: (params) => {
return this.$qs.stringify(params)
}
}).then(() => {
})
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实例上
插件地址：
版权声明：本⽂为CSDN博主「鸡蛋壳⼉」的原创⽂章，遵循CC 4.0 BY-SA版权协议，转载请附上原⽂出处链接及本声明。原⽂链接：
参考链接：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。