浅谈vue中get请求解决传输数据是数组格式的问题
qs的stringify接收2个参数，第⼀个参数是需要序列化的对象，第⼆个参数是转化格式,⼀般默认格式是给出明确的索引，如：arr[0]=1&arr[1]=2
//indices是index的复数格式，因此indices是索引的意思
//bracket是括号的意思，因此arrayFormat:'brackets'代表数组下标为空[]
qs.stringify({ arr: [1,2,3] }, { indices: false }) //arr=1&arr=2&arr=3
qs.stringify({ arr: [1,2,3] }, { arrayFormat: 'indices' }) //arr[0]=1&arr[1]=2&arr[2]=3
qs.stringify({ arr: [1,2,3] }, { arrayFormat: 'brackets' }) //arr[]=1&arr[]=2&arr[]=3
qs.stringify({ arr: [1,2,3] }, { arrayFormat: 'repeat' }) //arr=1&arr=2&arr=3
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解决数组参数问题
安装axios，qs
npm install qs
npm install axios -S
在main.js中引⼊qs
import Vue from 'vue'
后端字符串转数组import qs from 'qs'
import axios from 'axios'
Vue.prototype.$qs = qs;  //qs全局挂载在vue实例上
Vue.prototype.$http = axios; //axios全局挂载在vue实例上
在组件中使⽤
get请求的请求参数是将数据放在config的params中，实际是通过“&”拼接在url上
如果请求参数是数组arr=[1,2,3]，get请求不对数组做任何处理，则传递给后端的接⼝是
"url地址?arr[]=1&arr[]=2&arr[]=3"，接⼝会报错，因为识别不了“[]”这个符号
需要对数组进⾏修改，需要通过qs的stringify()⽅法将数组序列化，则传递给后端的接⼝是 “url地址?arr=1&arr=2&arr=3”，接⼝不会报错
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(() => {
})
以上这篇浅谈vue中get请求解决传输数据是数组格式的问题就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。

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