淺談vue中g(shù)et請(qǐng)求解決傳輸數(shù)據(jù)是數(shù)組格式的問(wèn)題
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]
//寫法一,直接使用qs的stringify()
this.$http.get('url地址', {
params: {
arr: this.$qs.stringify(this.arr) //數(shù)組拼接在url地址 url地址?arr=1&arr=2&arr=3
}
}).then(() => {
})
//寫法二 ，使用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è)參考，也希望大家多多支持腳本之家。
- Vue-cli中post請(qǐng)求發(fā)送Json格式數(shù)據(jù)方式
- Vue.js+HighCharts實(shí)現(xiàn)動(dòng)態(tài)請(qǐng)求展示時(shí)序數(shù)據(jù)
- vue本地模擬服務(wù)器請(qǐng)求mock數(shù)據(jù)的方法詳解
- vue異步請(qǐng)求數(shù)據(jù)重新渲染方式
- VUE前端從后臺(tái)請(qǐng)求過(guò)來(lái)的數(shù)據(jù)進(jìn)行轉(zhuǎn)換數(shù)據(jù)結(jié)構(gòu)操作
- vue項(xiàng)目中axios的封裝請(qǐng)求
- vue3實(shí)戰(zhàn)教程之a(chǎn)xios的封裝和環(huán)境變量
- Vue3中使用typescript封裝axios的實(shí)例詳解
- vue中數(shù)據(jù)請(qǐng)求axios的封裝和使用
相關(guān)文章
Vue封裝數(shù)字框組件實(shí)現(xiàn)流程詳解
這篇文章主要介紹了Vue封裝數(shù)字框組件實(shí)現(xiàn)流程，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2023-04-04
Vue中如何點(diǎn)擊獲取當(dāng)前元素下標(biāo)
這篇文章主要介紹了Vue中如何點(diǎn)擊獲取當(dāng)前元素下標(biāo)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
深入理解Vue響應(yīng)式原理及其實(shí)現(xiàn)方式
Vue的響應(yīng)式原理是Vue最核心的特性之一，也是Vue能夠?yàn)殚_(kāi)發(fā)者提供高效便捷的開(kāi)發(fā)體驗(yàn)的重要原因之一，這篇文章主要介紹了響應(yīng)式的原理及其實(shí)現(xiàn)方式，需要詳細(xì)了解可以參考下文2023-05-05
Vue瀏覽器鏈接與接口參數(shù)實(shí)現(xiàn)加密過(guò)程詳解
這篇文章主要介紹了Vue瀏覽器鏈接與接口參數(shù)實(shí)現(xiàn)加密過(guò)程，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2022-12-12
vue2+element-ui+nodejs實(shí)現(xiàn)圖片上傳和修改圖片到數(shù)據(jù)庫(kù)的方法
在Web開(kāi)發(fā)中經(jīng)常需要使用圖片,有時(shí)候需要對(duì)圖片進(jìn)行上傳,這篇文章主要給大家介紹了關(guān)于vue2+element-ui+nodejs實(shí)現(xiàn)圖片上傳和修改圖片到數(shù)據(jù)庫(kù)的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-04-04
最近需要在項(xiàng)目中使用地圖顯示點(diǎn)位信息,所以引入了騰訊地圖,這篇文章主要給大家介紹了關(guān)于Vue引入騰訊地圖(搜索獲取定位)的相關(guān)資料,需要的朋友可以參考下2023-10-10
在vue中，有時(shí)候你需要對(duì)data中的數(shù)據(jù)進(jìn)行處理，或者對(duì)抓取的數(shù)據(jù)進(jìn)行處理之后再掛載呈現(xiàn)到標(biāo)簽中，這時(shí)候你就需要計(jì)算屬性了，當(dāng)然看到這里你可能還是不了解那下面我舉幾個(gè)實(shí)例并附代碼解釋2023-02-02
vue中v-cloak解決刷新或者加載出現(xiàn)閃爍問(wèn)題（顯示變量）
這篇文章主要介紹了vue中v-cloak解決刷新或者加載出現(xiàn)閃爍問(wèn)題（顯示變量） ,需要的朋友可以參考下2018-04-04
詳解Vue里循環(huán)form表單項(xiàng)實(shí)例
本文主要介紹了Vue里循環(huán)form表單項(xiàng)實(shí)例，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章介紹了Vue項(xiàng)目中使用Bootstrap的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-03-03