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 相关文章推荐
jQuery插件jRumble实现网页元素抖动
Jun 05 Javascript
jQuery解析json数据实例分析
Nov 24 Javascript
浏览器环境下JavaScript脚本加载与执行探析之defer与async特性
Jan 14 Javascript
jQuery读取XML文件的方法示例
Feb 03 Javascript
原生JavaScript实现精美的淘宝轮播图效果示例【附demo源码下载】
May 27 Javascript
Javascript实现一个简单的输入关键字添加标签效果实例
Jun 01 Javascript
JavaScript之promise_动力节点Java学院整理
Jul 03 Javascript
ztree简介_动力节点Java学院整理
Jul 19 Javascript
AngularJs导出数据到Excel的示例代码
Aug 11 Javascript
在pycharm中开发vue的方法步骤
Mar 04 Javascript
微信小程序实现菜单左右联动
May 19 Javascript
微信小程序实现锚点跳转
Nov 23 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
php5 apache 2.2 webservice 创建与配置(java)
2011/01/27 PHP
php正则表达式(regar expression)
2011/09/10 PHP
PHP实现git部署的方法教程
2017/12/19 PHP
LBS blog sql注射漏洞[All version]-官方已有补丁
2007/08/26 Javascript
jQuery学习3:操作元素属性和特性
2010/02/07 Javascript
Js控制弹窗实现在任意分辨率下居中显示
2013/08/01 Javascript
js获取当月最后一天实例代码
2013/11/19 Javascript
JavaScript原生对象之Number对象的属性和方法详解
2015/03/13 Javascript
jquery+CSS3实现淘宝移动网页菜单效果
2015/08/31 Javascript
jQuery复制表单元素附源码分享效果演示
2015/09/30 Javascript
学习JavaScript设计模式(多态)
2015/11/25 Javascript
jQuery 获取屏幕高度、宽度的简单实现案例
2016/05/17 Javascript
JS & JQuery 动态添加 select option
2016/06/08 Javascript
基于vue-upload-component封装一个图片上传组件的示例
2018/10/16 Javascript
微信小程序页面间传值与页面取值操作实例分析
2019/04/30 Javascript
react 中父组件与子组件双向绑定问题
2019/05/20 Javascript
layui table 获取分页 limit的方法
2019/09/20 Javascript
python self,cls,decorator的理解
2009/07/13 Python
python中sets模块的用法实例
2014/09/30 Python
解读! Python在人工智能中的作用
2017/11/14 Python
Python查找两个有序列表中位数的方法【基于归并算法】
2018/04/20 Python
用python写一个定时提醒程序的实现代码
2019/07/22 Python
Python爬虫爬取Bilibili弹幕过程解析
2019/10/10 Python
Python抓包程序mitmproxy安装和使用过程图解
2020/03/02 Python
Pycharm Available Package无法显示/安装包的问题Error Loading Package List解决
2020/09/18 Python
HTML5 拖放(Drag 和 Drop)详解与实例代码
2017/09/14 HTML / CSS
贝玲妃英国官网:Benefit英国
2018/02/03 全球购物
美国在线和移动免费会员制批发零售商:Boxed(移动端的Costco)
2020/01/02 全球购物
Java中各种基本数据类型的默认值都是什么
2016/12/22 面试题
求职自荐信格式
2013/12/04 职场文书
2015年元旦促销方案书
2014/12/09 职场文书
员工辞职信怎么写
2015/02/27 职场文书
2015年学生会工作总结范文
2015/03/31 职场文书
小学语文教学反思范文
2016/03/03 职场文书
Django debug为True时,css加载失败的解决方案
2021/04/24 Python
django如何自定义manage.py管理命令
2021/04/27 Python