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 相关文章推荐
禁止刷新,回退的JS
Nov 25 Javascript
javascript 同时在IE和FireFox获取KeyCode的代码
Feb 07 Javascript
基于jQuery的的一个隔行变色,鼠标移动变色的小插件
Jul 06 Javascript
JS简单实现元素复制示例附图
Nov 19 Javascript
jQuery学习笔记之toArray()
Jun 09 Javascript
js钢琴按钮波浪式图片排列效果代码分享
Aug 26 Javascript
JavaScript实现的经典文件树菜单效果
Sep 08 Javascript
jQuery如何防止Ajax重复提交
Oct 14 Javascript
微信公众号支付H5调用支付解析
Nov 04 Javascript
JS常见简单正则表达式验证功能小结【手机,地址,企业税号,金额,身份证等】
Jan 22 Javascript
JavaScript实现多张图片放大镜效果示例【不限定图片尺寸,rem单位】
May 14 Javascript
vue开发chrome插件,实现获取界面数据和保存到数据库功能
Dec 01 Vue.js
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
支持数组的ADDSLASHES的php函数
2010/02/16 PHP
PHP调用MsSQL Server 2012存储过程获取多结果集(包含output参数)的详解
2013/07/03 PHP
php实现上传图片文件代码
2015/07/19 PHP
PHP中静态变量的使用方法实例分析
2016/12/01 PHP
实例分析基于PHP微信网页获取用户信息
2017/11/24 PHP
PHP实现微信支付(jsapi支付)流程步骤详解
2018/03/15 PHP
网页开发中的容易忽略的问题 javascript HTML中的table
2009/04/15 Javascript
javascript 操作select下拉列表框的一点小经验
2010/03/20 Javascript
从零开始学习jQuery (三) 管理jQuery包装集
2011/02/23 Javascript
利用JS延迟加载百度分享代码,提高网页速度
2013/07/01 Javascript
jQuery中;function($,undefined) 前面的分号的用处
2014/12/17 Javascript
jQuery实现可编辑的表格实例讲解(2)
2015/09/17 Javascript
20分钟轻松创建自己的Bootstrap站点
2016/05/12 Javascript
jquery对Json的各种遍历方法总结(必看篇)
2016/09/29 Javascript
微信小程序 视图层(xx.xml)和逻辑层(xx.js)详细介绍
2016/10/13 Javascript
解决Vue使用mint-ui loadmore实现上拉加载与下拉刷新出现一个页面使用多个上拉加载后冲突问题
2017/11/07 Javascript
基于Vue的移动端图片裁剪组件功能
2017/11/28 Javascript
关于vue状态过渡transition不起作用的原因解决
2019/04/09 Javascript
vue-router跳转时打开新页面的两种方法
2019/07/29 Javascript
[02:18]《我与DAC》之工作人员:为了热爱DOTA2的玩家们
2018/03/28 DOTA
python调用新浪微博API项目实践
2014/07/28 Python
Python进阶篇之字典操作总结
2016/11/16 Python
Python实现抓取网页生成Excel文件的方法示例
2017/08/05 Python
python OpenCV学习笔记之绘制直方图的方法
2018/02/08 Python
python 定时器,实现每天凌晨3点执行的方法
2019/02/20 Python
python安装本地whl的实例步骤
2019/10/12 Python
Tensorflow--取tensorf指定列的操作方式
2020/06/30 Python
如何使用 Flask 做一个评论系统
2020/11/27 Python
eBay荷兰购物网站:eBay.nl
2020/06/26 全球购物
应届毕业生应聘自荐信
2013/12/07 职场文书
六十岁生日答谢词
2014/01/10 职场文书
《难忘的泼水节》教学反思
2014/02/27 职场文书
八月迷情观后感
2015/06/11 职场文书
护士岗前培训心得体会
2016/01/08 职场文书
2016大学军训心得体会
2016/01/11 职场文书
Python中tkinter的用户登录管理的实现
2021/04/22 Python