快捷導(dǎo)航

vue axios post發(fā)送復(fù)雜對(duì)象問(wèn)題

更新時(shí)間：2019年06月04日 09:50:32 作者：程序媛的自我修煉

現(xiàn)在vue項(xiàng)目中，一般使用axios發(fā)送請(qǐng)求去后臺(tái)拉取數(shù)據(jù)。這篇文章主要介紹了vue axios post發(fā)送復(fù)雜對(duì)象的一點(diǎn)思考,需要的朋友可以參考下

一、項(xiàng)目情形

現(xiàn)在vue項(xiàng)目中，一般使用axios發(fā)送請(qǐng)求去后臺(tái)拉取數(shù)據(jù)。

在某些業(yè)務(wù)場(chǎng)景中，前端需要在某個(gè)字段中發(fā)送一個(gè)復(fù)雜的嵌套對(duì)象給后臺(tái)做保存并處理。雖然axios可配置發(fā)送方式（post/get等），但如果不做其他配置，post的數(shù)據(jù)其實(shí)也是拼在請(qǐng)求地址后面，而這種傳輸方式會(huì)有很多問(wèn)題：一是可能數(shù)據(jù)丟失，二是get傳送的數(shù)據(jù)長(zhǎng)度有l(wèi)imit，如果需要保存大段的中文，會(huì)報(bào)錯(cuò)；三是數(shù)據(jù)不直觀，復(fù)雜對(duì)象的格式會(huì)出現(xiàn)問(wèn)題。

二、解決方案

怎么實(shí)現(xiàn)使用post方法時(shí)，能實(shí)現(xiàn)formData方式提交，而且整個(gè)請(qǐng)求數(shù)據(jù)格式能像queryString一樣直觀。

使用QS將數(shù)據(jù)序列化

//main.js
import axios from 'axios';
Vue.prototype.$axios = axios; // 配置axios的訪問(wèn)方式
//demo.vue
import Qs from qs;
this.$axios({
 method: "post",
 url: "url",
 data: reqData,
 transformRequest: [ function(data){
  return Qs.stringify(data) //使用Qs將請(qǐng)求參數(shù)序列化
 }],
 headers： {
  'Content-Type': 'application/x-www-form-urlencoded' //必須設(shè)置傳輸方式
 }
}).then((res)=>{
 //邏輯代碼
}

完成第一步后，可以實(shí)現(xiàn)post請(qǐng)求了，請(qǐng)求體為formData的格式，但如果reqData是一個(gè)對(duì)象嵌套數(shù)組的復(fù)雜對(duì)象，form的格式會(huì)變得非常不直觀。如果此時(shí)后臺(tái)需要將對(duì)象整個(gè)儲(chǔ)存起來(lái)，以便下次拉取數(shù)據(jù)渲染前端頁(yè)面，則會(huì)增加很多額外的轉(zhuǎn)化工作。

//例如obj為一個(gè)嵌套多層的復(fù)雜對(duì)象
let reqData = {
 id: '123',
 status: '1',
 data: {
  innerData: {
   price: "higher",
   amount: "2000",
  },
  outerData: {
   price: "lower",
   amount: "3000"!
  },
  parts: ['123','234','345','456']
 }
}
//參考如上配置，最后請(qǐng)求體中parsed的數(shù)據(jù)格式會(huì)變成如下
![圖片描述][1]

對(duì)象跟數(shù)組的每一項(xiàng)都被拆拼成鍵值對(duì)，數(shù)據(jù)格式非常不直觀，如果后臺(tái)需要將整個(gè)數(shù)據(jù)保存以便下次取用，會(huì)不方便。

可以怎樣簡(jiǎn)單處理一下，讓它變得像如下圖一的get方法一樣參數(shù)清晰呢？

只需做一個(gè)簡(jiǎn)單的處理，將復(fù)雜對(duì)象對(duì)象變成字符串，再進(jìn)行傳輸。

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將請(qǐng)求參數(shù)序列化
 }],
 headers： {
  'Content-Type': 'application/x-www-form-urlencoded' //必須設(shè)置傳輸方式
 }
}).then((res)=>{
 //邏輯代碼
}

這樣之后，數(shù)據(jù)格式變得清晰可讀，而且后臺(tái)可以根據(jù)key值直接取出整個(gè)對(duì)象。我們也可以大方優(yōu)雅地用vue axios進(jìn)行post傳輸啦。

總結(jié)

以上所述是小編給大家介紹的vue axios post發(fā)送復(fù)雜對(duì)象問(wèn)題,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

您可能感興趣的文章: