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.二、參數結構清晰直觀