vue axios post发送复杂对象问题


Posted in Javascript onJune 04, 2019

一、项目情形

现在vue项目中,一般使用axios发送请求去后台拉取数据。

在某些业务场景中,前端需要在某个字段中发送一个复杂的嵌套对象给后台做保存并处理。虽然axios可配置发送方式(post/get等),但如果不做其他配置,post的数据其实也是拼在请求地址后面,而这种传输方式会有很多问题:一是可能数据丢失,二是get传送的数据长度有limit,如果需要保存大段的中文,会报错;三是数据不直观,复杂对象的格式会出现问题。

二、解决方案

怎么实现使用post方法时,能实现formData方式提交,而且整个请求数据格式能像queryString一样直观。

使用QS将数据序列化

//main.js
import axios from 'axios';
Vue.prototype.$axios = axios; // 配置axios的访问方式
//demo.vue
import Qs from qs;
this.$axios({
 method: "post",
 url: "url",
 data: reqData,
 transformRequest: [ function(data){
  return Qs.stringify(data) //使用Qs将请求参数序列化
 }],
 headers: {
  'Content-Type': 'application/x-www-form-urlencoded' //必须设置传输方式
 }
}).then((res)=>{
 //逻辑代码
}

完成第一步后,可以实现post请求了,请求体为formData的格式,但如果reqData是一个对象嵌套数组的复杂对象,form的格式会变得非常不直观。如果此时后台需要将对象整个储存起来,以便下次拉取数据渲染前端页面,则会增加很多额外的转化工作。

//例如obj为一个嵌套多层的复杂对象
let reqData = {
 id: '123',
 status: '1',
 data: {
  innerData: {
   price: "higher",
   amount: "2000",
  },
  outerData: {
   price: "lower",
   amount: "3000"!
  },
  parts: ['123','234','345','456']
 }
}
//参考如上配置,最后请求体中parsed的数据格式会变成如下
![图片描述][1]

对象跟数组的每一项都被拆拼成键值对,数据格式非常不直观,如果后台需要将整个数据保存以便下次取用,会不方便。

可以怎样简单处理一下,让它变得像如下图一的get方法一样参数清晰呢?

vue axios post发送复杂对象问题

只需做一个简单的处理,将复杂对象对象变成字符串,再进行传输。

let data = {
  innerData: {
   price: "higher",
   amount: "2000",
  },
  outerData: {
   price: "lower",
   amount: "3000"!
  },
  parts: ['123','234','345','456']
 },
 reqData = {
  id: '123',
  status: '1',
  data: **JSON.stringify(data)**
 };
this.$axios({
 method: "post",
 url: "url",
 data: reqData,
 transformRequest: [ function(data){
  return Qs.stringify(data) //使用Qs将请求参数序列化
 }],
 headers: {
  'Content-Type': 'application/x-www-form-urlencoded' //必须设置传输方式
 }
}).then((res)=>{
 //逻辑代码
}

这样之后,数据格式变得清晰可读,而且后台可以根据key值直接取出整个对象。我们也可以大方优雅地用vue axios进行post传输啦。

vue axios post发送复杂对象问题

总结

以上所述是小编给大家介绍的vue axios post发送复杂对象问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码
Feb 22 Javascript
Javascript基础教程之while语句
Jan 18 Javascript
举例简介AngularJS的内部语言环境
Jun 17 Javascript
JS使用cookie实现DIV提示框只显示一次的方法
Nov 05 Javascript
Vue进度条progressbar组件功能
Apr 17 Javascript
layui 监听表格复选框选中值的方法
Aug 15 Javascript
React父子组件间的传值的方法
Nov 13 Javascript
深入浅出 Vue 系列 -- 数据劫持实现原理
Apr 23 Javascript
Vue 无限滚动加载指令实现方法
May 28 Javascript
微信小程序模板消息限制实现无限制主动推送的示例代码
Aug 27 Javascript
vue 路由守卫(导航守卫)及其具体使用
Feb 25 Javascript
浅谈vue 二级路由嵌套和二级路由高亮问题
Aug 06 Javascript
vue 2.5.1 源码学习 之Vue.extend 和 data的合并策略
Jun 04 #Javascript
vue实现分环境打包步骤(给不同的环境配置相对应的打包命令)
Jun 04 #Javascript
JavaScript实现页面中录音功能的方法
Jun 04 #Javascript
vue elementUI 表单校验功能之数组多层嵌套
Jun 04 #Javascript
小程序根据手机机型设置自定义底部导航距离
Jun 04 #Javascript
js回文数的4种判断方法示例
Jun 04 #Javascript
Vue对象赋值视图不更新问题及解决方法
Jun 03 #Javascript
You might like
《心理测量者3》剧场版动画预告
2020/03/02 日漫
11个PHP 分页脚本推荐
2011/08/15 PHP
根据ip调用新浪api获取城市名并转成拼音
2014/03/07 PHP
phpMyAdmin自动登录和取消自动登录的配置方法
2014/05/12 PHP
html静态页面调用php文件的方法
2014/11/13 PHP
起点页面传值js,有空研究学习下
2010/01/25 Javascript
jquery easyui的tabs使用时的问题
2010/03/23 Javascript
页面载入结束自动调用js函数示例
2013/09/23 Javascript
raphael.js绘制中国地图 地图绘制方法
2014/02/12 Javascript
百度移动版的url编码解码示例
2014/04/29 Javascript
关于javascript中dataset的问题小结
2015/11/16 Javascript
解析Node.js基于模块和包的代码部署方式
2016/02/16 Javascript
jQuery中的on与bind绑定事件区别实例详解
2017/02/28 Javascript
vue2.0 elementUI制作面包屑导航栏
2018/02/22 Javascript
解决vue处理axios post请求传参的问题
2018/03/05 Javascript
vue-cli脚手架build目录下utils.js工具配置文件详解
2018/09/14 Javascript
nodejs require js文件入口,在package.json中指定默认入口main方法
2018/10/10 NodeJs
VUE简单的定时器实时刷新的实现方法
2019/01/20 Javascript
基于javascript的拖拽类封装详解
2019/04/19 Javascript
使用Python处理Excel表格的简单方法
2018/06/07 Python
python实现俄罗斯方块
2018/06/26 Python
在matplotlib的图中设置中文标签的方法
2018/12/13 Python
Python3+OpenCV2实现图像的几何变换(平移、镜像、缩放、旋转、仿射)
2019/05/13 Python
python中的 zip函数详解及用法举例
2020/02/16 Python
Python Flask上下文管理机制实例解析
2020/03/16 Python
Python unittest生成测试报告过程解析
2020/09/08 Python
python switch 实现多分支选择功能
2020/12/21 Python
eBay德国站:eBay.de
2017/09/14 全球购物
经济学人订阅:The Economist
2018/07/19 全球购物
保时捷设计:Porsche Design
2019/03/30 全球购物
Dr. Martens马汀博士德国官网:马丁靴鼻祖
2019/12/26 全球购物
诚信贷款承诺书
2014/05/30 职场文书
关于读书的演讲稿800字
2014/08/27 职场文书
保护环境的宣传语
2015/07/13 职场文书
解除合同协议书范本
2016/03/21 职场文书
基于nginx实现上游服务器动态自动上下线无需reload的实现方法
2021/03/31 Servers