vue axios post發送復雜對象問題

2019-11-19 11:24:18

字體：大中小

來源：轉載

供稿：網友

一、項目情形

現在vue項目中，一般使用axios發送請求去后臺拉取數據。

在某些業務場景中，前端需要在某個字段中發送一個復雜的嵌套對象給后臺做保存并處理。雖然axios可配置發送方式（post/get等），但如果不做其他配置，post的數據其實也是拼在請求地址后面，而這種傳輸方式會有很多問題：一是可能數據丟失，二是get傳送的數據長度有limit，如果需要保存大段的中文，會報錯；三是數據不直觀，復雜對象的格式會出現問題。

二、解決方案

怎么實現使用post方法時，能實現formData方式提交，而且整個請求數據格式能像queryString一樣直觀。

使用QS將數據序列化

//main.jsimport axios from 'axios';Vue.prototype.$axios = axios; // 配置axios的訪問方式//demo.vueimport 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)=>{ //邏輯代碼}

這樣之后，數據格式變得清晰可讀，而且后臺可以根據key值直接取出整個對象。我們也可以大方優雅地用vue axios進行post傳輸啦。