久久r热视频,国产午夜精品一区二区三区视频,亚洲精品自拍偷拍,欧美日韩精品二区

您的位置:首頁(yè)技術(shù)文章
文章詳情頁(yè)

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

瀏覽:140日期:2022-12-18 15:03:33

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=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請(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=2JSON.stringify(obj) // '{’a’: 1, ’b’: 2}'

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

安裝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í)際是通過“&”拼接在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)行修改,需要通過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ù)組格式的問題就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持好吧啦網(wǎng)。

標(biāo)簽: Vue
相關(guān)文章:
主站蜘蛛池模板: 香格里拉县| 绥宁县| 桓仁| 乡城县| 江城| 浙江省| 淅川县| 北海市| 逊克县| 利川市| 大名县| 普安县| 余姚市| 观塘区| 浦城县| 伊宁县| 聊城市| 石泉县| 清水河县| 靖远县| 濉溪县| 崇信县| 财经| 漾濞| 繁峙县| 辽中县| 遂溪县| 宜州市| 边坝县| 浪卡子县| 雅江县| 青神县| 浏阳市| 通化市| 双城市| 称多县| 明光市| 思茅市| 将乐县| 合阳县| 永丰县|