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、パラメータ構造がはっきりしている