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

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

2、解决方案
怎么实现使用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的数据格式会变成以下

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

三、能够怎样简单处理一下，让它变得像以下图一的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.一、参数没有拼在url上

3.二、参数结构清晰直观