快捷導(dǎo)航

淺談vue中g(shù)et請(qǐng)求解決傳輸數(shù)據(jù)是數(shù)組格式的問(wèn)題

更新時(shí)間：2020年08月03日 14:50:19 作者：隨意花

這篇文章主要介紹了淺談vue中g(shù)et請(qǐng)求解決傳輸數(shù)據(jù)是數(shù)組格式的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

qs的stringify接收2個(gè)參數(shù)，第一個(gè)參數(shù)是需要序列化的對(duì)象，第二個(gè)參數(shù)是轉(zhuǎn)化格式,一般默認(rèn)格式是給出明確的索引，如：arr[0]=1&arr[1]=2

//indices是index的復(fù)數(shù)格式，因此indices是索引的意思
//bracket是括號(hào)的意思，因此arrayFormat:'brackets'代表數(shù)組下標(biāo)為空[]

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請(qǐng)求接口的請(qǐng)求數(shù)據(jù)，可以使用parse()，將拼接在地址的參數(shù)數(shù)據(jù)轉(zhuǎn)換為對(duì)象

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的區(qū)別

let obj = { a: 1, b: 2 }
qs.stringify(obj)  //a=1&b=2
JSON.stringify(obj) // "{'a': 1, 'b': 2}"

qs解決數(shù)組參數(shù)問(wèn)題

安裝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實(shí)例上
Vue.prototype.$http = axios; //axios全局掛載在vue實(shí)例上

在組件中使用

get請(qǐng)求的請(qǐng)求參數(shù)是將數(shù)據(jù)放在config的params中，實(shí)際是通過(guò)“&”拼接在url上

如果請(qǐng)求參數(shù)是數(shù)組arr=[1,2,3]，get請(qǐng)求不對(duì)數(shù)組做任何處理，則傳遞給后端的接口是

"url地址?arr[]=1&arr[]=2&arr[]=3"，接口會(huì)報(bào)錯(cuò)，因?yàn)樽R(shí)別不了“[]”這個(gè)符號(hào)

需要對(duì)數(shù)組進(jìn)行修改，需要通過(guò)qs的stringify()方法將數(shù)組序列化，則傳遞給后端的接口是 “url地址?arr=1&arr=2&arr=3”，接口不會(huì)報(bào)錯(cuò)

this.arr = [1,2,3]
//寫(xiě)法一,直接使用qs的stringify()
this.$http.get('url地址', {
 params: {
 arr: this.$qs.stringify(this.arr)  //數(shù)組拼接在url地址 url地址?arr=1&arr=2&arr=3
 }
}).then(() => {
}) 

//寫(xiě)法二 ，使用axios提供的paramsSerializer序列化函數(shù)
this.$http.get('url地址', {
 params: {
 arr: this.arr  //數(shù)組拼接在url地址 url地址?arr=1&arr=2&arr=3
 },
 paramsSerializer: (params) => {
 return this.$qs.stringify(params) 
 }
}).then(() => {
})

以上這篇淺談vue中g(shù)et請(qǐng)求解決傳輸數(shù)據(jù)是數(shù)組格式的問(wèn)題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: