免费观看又色又爽又黄的小说免费_美女福利视频国产片_亚洲欧美精品_美国一级大黄大色毛片

vueaxiospost發送復雜對象問題

一、項目情形

成都創新互聯的客戶來自各行各業,為了共同目標,我們在工作上密切配合,從創業型小企業到企事業單位,感謝他們對我們的要求,感謝他們從不同領域給我們帶來的挑戰,讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。專業領域包括網站制作、成都做網站、電商網站開發、微信營銷、系統平臺開發。

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

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

二、解決方案

怎么實現使用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的數據格式會變成如下
![圖片描述][1]

對象跟數組的每一項都被拆拼成鍵值對,數據格式非常不直觀,如果后臺需要將整個數據保存以便下次取用,會不方便。

可以怎樣簡單處理一下,讓它變得像如下圖一的get方法一樣參數清晰呢?

vue axios post發送復雜對象問題

只需做一個簡單的處理,將復雜對象對象變成字符串,再進行傳輸。

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傳輸啦。

vue axios post發送復雜對象問題

總結

以上所述是小編給大家介紹的vue axios post發送復雜對象問題,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對創新互聯網站的支持!
如果你覺得本文對你有幫助,歡迎轉載,煩請注明出處,謝謝!

本文名稱:vueaxiospost發送復雜對象問題
分享地址:http://m.newbst.com/article22/jheijc.html

成都網站建設公司_創新互聯,為您提供網站收錄品牌網站建設服務器托管App開發定制網站網站排名

廣告

聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯

h5響應式網站建設