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=3qs.stringify({ arr: [1,2,3] }, { arrayFormat: ’indices’ }) //arr[0]=1&arr[1]=2&arr[2]=3qs.stringify({ arr: [1,2,3] }, { arrayFormat: ’brackets’ }) //arr[]=1&arr[]=2&arr[]=3qs.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=2JSON.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.$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請求解決傳輸數據是數組格式的問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持好吧啦網。