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 相关文章推荐
纯JavaScript实现的完美渐变弹出层效果代码
Apr 02 Javascript
JavaScript的常见兼容问题及相关解决方法(chrome/IE/firefox)
Dec 31 Javascript
js如何获取object类型里的键值
Feb 18 Javascript
JS实现点击按钮后框架内载入不同网页的方法
May 05 Javascript
JS实现放大、缩小及拖拽图片的方法【可兼容IE、火狐】
Aug 23 Javascript
js 转义字符及URI编码详解
Feb 28 Javascript
BootStrap Fileinput上传插件使用实例代码
Jul 28 Javascript
优雅的在React项目中使用Redux的方法
Nov 10 Javascript
javascript合并两个数组最简单的实现方法
Sep 14 Javascript
js正则匹配多个全部数据问题
Dec 20 Javascript
JS实现基本的网页计算器功能示例
Jan 16 Javascript
js+canvas实现转盘效果(两个版本)
Sep 13 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
全国FM电台频率大全 - 23 四川省
2020/03/11 无线电
php多用户读写文件冲突的解决办法
2013/11/06 PHP
Linux下PHP安装mcrypt扩展模块笔记
2014/09/10 PHP
PHP中使用imagick实现把PDF转成图片
2015/01/26 PHP
php获取系统变量方法小结
2015/05/29 PHP
PHP中使用substr()截取字符串出现中文乱码问题该怎么办
2015/10/21 PHP
对setInterval在火狐和chrome切换标签产生奇怪的效果之探索,与解决方案!
2011/10/29 Javascript
JavaScript移除数组内重复元素的方法
2015/03/18 Javascript
JavaScript中setMonth()方法的使用详解
2015/06/11 Javascript
JS右下角广告窗口代码(可收缩、展开及关闭)
2015/09/04 Javascript
js密码强度检测
2016/01/07 Javascript
js简单判断移动端系统的方法
2016/02/25 Javascript
JS 实现倒计时数字时钟效果【附实例代码】
2016/03/30 Javascript
JavaScript 中有关数组对象的方法(详解)
2016/08/15 Javascript
AngularJS中的按需加载ocLazyLoad示例
2017/01/11 Javascript
Node.js 使用jade模板引擎的示例
2018/05/11 Javascript
微信小程序自定义组件封装及父子间组件传值的方法
2018/08/28 Javascript
Web服务器框架 Tornado简介
2014/07/16 Python
Python类的专用方法实例分析
2015/01/09 Python
python基础教程之Filter使用方法
2017/01/17 Python
Python设计模式之备忘录模式原理与用法详解
2019/01/15 Python
Python中BeautifuSoup库的用法使用详解
2019/11/15 Python
python循环输出三角形图案的例子
2019/11/22 Python
python中的itertools的使用详解
2020/01/13 Python
python实现爱奇艺登陆密码RSA加密的方法示例详解
2020/05/27 Python
使用CSS3配合IE滤镜实现渐变和投影的效果
2015/09/06 HTML / CSS
html5与css3小应用
2013/04/03 HTML / CSS
HTML5中的websocket实现直播功能
2018/05/21 HTML / CSS
无谷物狗粮:Pooch & Mutt
2018/05/23 全球购物
澳大利亚领先的亚麻品牌:Bed Threads
2019/12/16 全球购物
JD Sports丹麦:英国领先的运动时尚零售商
2020/11/24 全球购物
师德标兵先进事迹材料
2014/12/19 职场文书
人事聘任通知
2015/04/21 职场文书
Mysql数据库命令大全
2021/05/26 MySQL
俄罗斯十大城市人口排名,第三首都仅排第六,第二是北方首都
2022/03/20 杂记
在 Python 中利用 Pool 进行多线程
2022/04/24 Python