vue axios post发送复杂对象的一点思考

一、项目情形
现在vue项目中，一般使用axios发送请求去后台拉取数据。
在某些业务场景中，前端需要在某个字段中发送一个复杂的嵌套对象给后台做保存并处理。虽然axios可配置发送方式（post/get等），用data传输参数，后台童鞋接收不到payload的数据格式。

二、解决方案
怎么实现使用post方法时，能实现formData方式提交，而且整个请求数据格式能像queryString一样直观。

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

2、完成第一步后，可以实现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的数据格式会变成如下

对象跟数组的每一项都被拆拼成键值对，数据格式非常不直观，如果此时后台需要将对象整个储存起来，以便下次使用使用录入的数据还原前端页面，则会增加很多额外的转化工作。

3、可以怎样简单处理一下，让它变得像如下图一的get方法一样参数清晰呢？
（图一）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)=>{
    //逻辑代码
}

这样之后，数据格式变得清晰可读，而且后台可以根据key值直接取出整个对象。我们也可以大方优雅地用vue axios进行post formData传输啦。
3.1、参数没有拼在url上

3.2、参数结构清晰直观