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


Posted in Javascript onAugust 03, 2020

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

Javascript 相关文章推荐
添加JavaScript重载函数的辅助方法2
Jul 04 Javascript
浅析onsubmit校验表单时利用ajax的return false无效问题
Jul 10 Javascript
js数组操作学习总结
Nov 04 Javascript
input输入框鼠标焦点提示信息
Mar 17 Javascript
jQuery实现的类似淘宝网站搜索框样式代码分享
Aug 24 Javascript
xmlplus组件设计系列之路由(ViewStack)(7)
May 02 Javascript
详解Webpack DLL用法以及功能
Jul 11 Javascript
关于在mongoose中填充外键的方法详解
Aug 14 Javascript
Node.JS中快速扫描端口并发现局域网内的Web服务器地址(80)
Sep 18 Javascript
JavaScript类数组对象转换为数组对象的方法实例分析
Jul 24 Javascript
详解js中let与var声明变量的区别
Apr 05 Javascript
js实现简单的无缝轮播效果
Sep 05 Javascript
VUE使用axios调用后台API接口的方法
Aug 03 #Javascript
vue cli3.0打包上线静态资源找不到路径的解决操作
Aug 03 #Javascript
js数组中去除重复值的几种方法
Aug 03 #Javascript
Vue打包部署到Nginx时,css样式不生效的解决方式
Aug 03 #Javascript
javascript运行机制之执行顺序理解
Aug 03 #Javascript
解决vue+elementui项目打包后样式变化问题
Aug 03 #Javascript
vue实现PC端分辨率适配操作
Aug 03 #Javascript
You might like
《猛禽小队》:DC宇宙的又一超级大烂片
2020/04/09 欧美动漫
SMARTY学习手记
2007/01/04 PHP
PHP中将数组转成XML格式的实现代码
2011/08/08 PHP
php输出1000以内质数(素数)示例
2014/02/16 PHP
PHP实现文件下载断点续传详解
2014/10/15 PHP
Yii核心验证器api详解
2016/11/23 PHP
JavaScript 的继承
2011/10/01 Javascript
js实现运动logo图片效果及运动元素对象sportBox使用方法
2012/12/25 Javascript
学习JavaScript设计模式(多态)
2015/11/25 Javascript
JavaScript中rem布局在react中的应用
2015/12/09 Javascript
jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单
2016/09/21 Javascript
vue中简单弹框dialog的实现方法
2018/02/26 Javascript
vue操作下拉选择器获取选择的数据的id方法
2018/08/24 Javascript
JavaScript对象拷贝与赋值操作实例分析
2018/12/10 Javascript
开源软件包和环境管理系统Anaconda的安装使用
2017/09/04 Python
Python3.4实现从HTTP代理网站批量获取代理并筛选的方法示例
2017/09/26 Python
python调用tcpdump抓包过滤的方法
2018/07/18 Python
在vscode中配置python环境过程解析
2019/09/28 Python
python使用openCV遍历文件夹里所有视频文件并保存成图片
2020/01/14 Python
python GUI库图形界面开发之PyQt5结合Qt Designer创建信号与槽的详细方法与实例
2020/03/08 Python
python中lower函数实现方法及用法讲解
2020/12/23 Python
利用纯css3实现的文字亮光特效的代码演示
2014/11/27 HTML / CSS
英国花园药房: The Garden Pharmacy
2017/12/28 全球购物
Coltorti Boutique官网:来自意大利的设计师品牌买手店
2018/11/09 全球购物
办公室文秘自我鉴定
2013/09/21 职场文书
汽车技术服务与营销专业在籍生自荐信
2013/09/28 职场文书
公务员培训心得体会
2013/12/28 职场文书
幼儿园儿童节主持词
2014/03/21 职场文书
店铺转让协议书(2014版)
2014/09/23 职场文书
个人三严三实对照检查材料
2014/09/25 职场文书
英文升职感谢信
2015/01/23 职场文书
药店营业员岗位职责
2015/04/14 职场文书
订货会主持词
2015/07/01 职场文书
Python入门之基础语法详解
2021/05/11 Python
python pygame入门教程
2021/06/01 Python
PHP 时间处理类Carbon
2022/05/20 PHP