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 相关文章推荐
使用Microsoft Ajax Minifier减小JavaScript文件大小的方法
Apr 01 Javascript
jquery 单击li防止重复加载的实现代码
Dec 24 Javascript
Pro JavaScript Techniques学习笔记
Dec 28 Javascript
JavaScript实现x秒后自动跳转到一个页面
Jan 03 Javascript
js中typeof的用法汇总
Dec 12 Javascript
jQuery中dom元素上绑定的事件详解
Apr 24 Javascript
js实现的万能flv网页播放器代码
Apr 30 Javascript
微信小程序 购物车简单实例
Oct 24 Javascript
详解JS对象封装的常用方式
Dec 30 Javascript
JavaScript中捕获与冒泡详解及实例
Feb 03 Javascript
javaScript canvas实现(画笔大小 颜色 橡皮的实例)
Nov 28 Javascript
微信小程序中的店铺评分组件及vue中用svg实现的评分显示组件
Nov 16 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
创建数据库php代码 用PHP写出自己的BLOG系统
2010/04/12 PHP
php 删除cookie方法详解
2014/12/01 PHP
php字符串函数学习之substr()
2015/03/27 PHP
Zend Framework动作助手FlashMessenger用法详解
2016/03/05 PHP
PHP命名空间namespace的定义方法详解
2017/03/29 PHP
laravel执行php artisan migrate报错的解决方法
2019/10/09 PHP
父节点获取子节点的字符串示例代码
2014/02/26 Javascript
JavaScript把数组作为堆栈使用的方法
2015/03/20 Javascript
canvas实现图像放大镜
2017/02/06 Javascript
浅谈JavaScript中的属性:如何遍历属性
2017/09/14 Javascript
vue组件实现弹出框点击显示隐藏效果
2020/10/26 Javascript
微信小程序实现美团菜单
2018/06/06 Javascript
Vue2.0 v-for filter列表过滤功能的实现
2018/09/07 Javascript
Vue+webpack项目配置便于维护的目录结构教程详解
2018/10/14 Javascript
vue组件实践之可搜索下拉框功能
2018/11/25 Javascript
JS拖动选择table里的单元格完整实例【基于jQuery】
2019/05/28 jQuery
微信小程序模板消息推送的两种实现方式
2019/08/27 Javascript
vue实现计步器功能
2019/11/01 Javascript
vue elementui tree 任意级别拖拽功能代码
2020/08/31 Javascript
[47:03]Ti4第二日主赛事败者组 LGD vs iG 2
2014/07/21 DOTA
Python 获取新浪微博的最新公共微博实例分享
2014/07/03 Python
Python实现简单状态框架的方法
2015/03/19 Python
微信跳一跳python自动代码解读1.0
2018/01/12 Python
pytorch程序异常后删除占用的显存操作
2020/01/13 Python
aws 通过boto3 python脚本打pach的实现方法
2020/05/10 Python
可能这些是你想要的H5软键盘兼容方案(小结)
2019/04/23 HTML / CSS
AmazeUI的下载配置与Helloworld的实现
2020/08/19 HTML / CSS
澳大利亚足球鞋和服装购物网站:Ultra Football
2018/10/11 全球购物
Foot Locker德国官方网站:美国运动服和鞋类零售商
2018/11/01 全球购物
网络工程师个人的自我评价范文
2013/10/01 职场文书
大一自我鉴定范文
2013/10/04 职场文书
小学生竞选班长演讲稿
2014/04/24 职场文书
质量整改报告范文
2014/11/08 职场文书
学习党史心得体会2016
2016/01/23 职场文书
《有余数的除法》教学反思
2016/02/22 职场文书
Java面试题冲刺第十六天--消息队列
2021/08/07 面试题