DDR爱好者之家

浅谈vue中get请求解决传输数据是数组格式的问题
站长资源 2024/12/26 佚名
26 1538
DDR爱好者之家 Design By 杰米

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请求解决传输数据是数组格式的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？

根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米