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,{ arrayFormat: 'indices' }) //arr[0]=1&arr[1]=2&arr[2]=3
qs.stringify({ arr: [1,{ arrayFormat: 'brackets' }) //arr[]=1&arr[]=2&arr[]=3
qs.stringify({ arr: [1,{ 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,3]，get請求不對陣列做任何處理，則傳遞給後端的介面是

"url地址?arr[]=1&arr[]=2&arr[]=3"，介面會報錯，因為識別不了“[]”這個符號

需要對陣列進行修改，需要通過qs的stringify()方法將陣列序列化，則傳遞給後端的介面是 “url地址?arr=1&arr=2&arr=3”，介面不會報錯

this.arr = [1,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(() => {
}) 

以上這篇淺談vue中get請求解決傳輸資料是陣列格式的問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。