时间:2021-05-18
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=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=3qs的parse()使用
如果接口需要获取get请求接口的请求数据,可以使用parse(),将拼接在地址的参数数据转换为对象
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的区别
let obj = { a: 1, b: 2 }qs.stringify(obj) //a=1&b=2JSON.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地址?arr[]=1&arr[]=2&arr[]=3",接口会报错,因为识别不了“[]”这个符号
需要对数组进行修改,需要通过qs的stringify()方法将数组序列化,则传递给后端的接口是 “url地址?arr=1&arr=2&arr=3”,接口不会报错
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请求解决传输数据是数组格式的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
GET请求在koa中,GET请求获取请求数据request对象中的query方法和querystring方法,query方法返回的是格式化好的参数,querys
在vue项目里面,需要循环发送ajax请求,出现的问题就是循环结束,第一次服务器还没返回,导致数据处理错误,需要使用同步请求解决方案目前没有发现axios可以同
vue+webpack项目中数据更新后页面没有刷新问题,ie11下,如果GET请求请求相同的URL,默认会使用之前请求来的缓存数据,而不会去请求接口获取最新数据
以前vue官方推荐的ajax库是vue-resource,现在改为axiosaxios的github仓库实现的效果:异步请求页面异步发出get请求获取数据,提交
vue-cli3跨域配置:在vue-resource的数据请求中,一般我们会将请求方式GET/POST修改为jsonp的请求方式就可以实现跨域。但是对于只支持G