vue中get请求解决传输数据是数组格式问题 vue

vue中axios解决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解决数组参数问题
【vue中get请求解决传输数据是数组格式问题】安装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.$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(() => { })