乐趣区

vue-axios-post发送复杂对象的一点思考

jiezi

一、项目情形
现在 vue 项目中，一般使用 axios 发送请求去后台拉取数据。
在某些业务场景中，前端需要在某个字段中发送一个复杂的嵌套对象给后台做保存并处理。虽然 axios 可配置发送方式（post/get 等），但如果不做其他配置，post 的数据其实也是拼在请求地址后面，而这种传输方式会有很多问题：

  1. 可能数据丢失；
  2. get 传送的数据长度有 limit，如果需要保存大段的中文，会报错；
  3. 数据不直观，复杂对象的格式会出现问题。

二、解决方案
怎么实现使用 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、参数结构清晰直观

退出移动版