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 相关文章推荐
FF火狐下获取一个元素同类型的相邻元素实现代码
Dec 15 Javascript
json的定义、标准格式及json字符串检验
May 11 Javascript
Javascript实现获取窗口的大小和位置代码分享
Dec 04 Javascript
微信小程序 数据交互与渲染实例详解
Jan 21 Javascript
JavaScript中无法通过div.style.left获取值的解决方法
Feb 19 Javascript
js replace 全局替换的操作方法
Jun 12 Javascript
JS实现的Object数组去重功能示例【数组成员为Object对象】
Feb 01 Javascript
使用jQuery如何写一个含验证码的登录界面
May 13 jQuery
深入浅出了解Node.js Streams
May 27 Javascript
通过微信公众平台获取公众号文章的方法示例
Dec 25 Javascript
微信小程序实现弹框效果
May 26 Javascript
JS+JQuery实现无缝连接轮播图
Dec 30 jQuery
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
解析mysql 表中的碎片产生原因以及清理
2013/06/22 PHP
symfony2.4的twig中date用法分析
2016/03/18 PHP
laravel 修改记住我功能的cookie保存时间的方法
2019/10/14 PHP
ThinkPHP5分页paginate代码实例解析
2020/11/10 PHP
统一接口:为FireFox添加IE的方法和属性的js代码
2007/03/25 Javascript
jQuery find和children方法使用
2011/01/31 Javascript
jQuery中$.fn的用法示例介绍
2013/11/05 Javascript
jquery easyui combox一些实用的小方法
2013/12/25 Javascript
用js将内容复制到剪贴板兼容浏览器
2014/03/18 Javascript
利用js获取下拉框中所选的值
2016/12/01 Javascript
JS+Canvas实现的俄罗斯方块游戏完整实例
2016/12/12 Javascript
教你用十行node.js代码读取docx的文本
2017/03/08 Javascript
JS实现无缝循环marquee滚动效果
2017/05/22 Javascript
angularjs利用directive实现移动端自定义软键盘的示例
2017/09/20 Javascript
详解angular应用容器化部署
2018/08/14 Javascript
js 将多个对象合并成一个对象 assign方法的实现
2020/09/24 Javascript
基于VUE实现简单的学生信息管理系统
2021/01/13 Vue.js
python登录QQ邮箱发信的实现代码
2013/02/10 Python
用Python的Django框架编写从Google Adsense中获得报表的应用
2015/04/17 Python
python实现基本进制转换的方法
2015/07/11 Python
将Python代码嵌入C++程序进行编写的实例
2015/07/31 Python
python web框架学习笔记
2016/05/03 Python
Python使用smtplib模块发送电子邮件的流程详解
2016/06/27 Python
Python中装饰器兼容加括号和不加括号的写法详解
2017/07/05 Python
详解python百行有效代码实现汉诺塔小游戏(简约版)
2020/10/30 Python
Python实现简单猜数字游戏
2021/02/03 Python
用css3实现当鼠标移进去时当前亮其他变灰效果
2014/04/08 HTML / CSS
中秋节超市促销方案
2014/01/30 职场文书
人力资源作业细则
2014/03/03 职场文书
就业协议书怎么填
2014/09/15 职场文书
暑期社会实践证明书
2014/11/17 职场文书
新生入学欢迎词
2015/01/26 职场文书
《观察物体》教学反思
2016/02/17 职场文书
python人工智能human learn绘图可创建机器学习模型
2021/11/23 Python
Python OpenCV实现图像模板匹配详解
2022/04/07 Python
Golang gRPC HTTP协议转换示例
2022/06/16 Golang