vue axios post发送复杂对象问题

Z时代
2024-01-10
分类：综合

一、项目情形

现在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方法一样参数清晰呢？

只需做一个简单的处理，将复杂对象对象变成字符串，再进行传输。


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)=>{
 //逻辑代码
}