浅谈vue中get请求解决传输数据是数组格式的问题

(编辑:jimmy 日期: 2024/12/26 浏览:2)

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,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请求接口的请求数据,可以使用parse(),将拼接在地址的参数数据转换为对象

let url = "111.111.3.203:8080/getList"
let splitObj = url.split('"htmlcode">
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,2,3],get请求不对数组做任何处理,则传递给后端的接口是

"url地址",接口会报错,因为识别不了“[]”这个符号

需要对数组进行修改,需要通过qs的stringify()方法将数组序列化,则传递给后端的接口是 “url地址"htmlcode">

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请求解决传输数据是数组格式的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

一句话新闻

高通与谷歌联手!首款骁龙PC优化Chrome浏览器发布
高通和谷歌日前宣布,推出首次面向搭载骁龙的Windows PC的优化版Chrome浏览器。
在对骁龙X Elite参考设计的初步测试中,全新的Chrome浏览器在Speedometer 2.1基准测试中实现了显著的性能提升。
预计在2024年年中之前,搭载骁龙X Elite计算平台的PC将面世。该浏览器的提前问世,有助于骁龙PC问世就获得满血表现。
谷歌高级副总裁Hiroshi Lockheimer表示,此次与高通的合作将有助于确保Chrome用户在当前ARM兼容的PC上获得最佳的浏览体验。