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

栏目: JavaScript · 发布时间: 5年前

内容简介:一、项目情形现在vue项目中,一般使用axios发送请求去后台拉取数据。在某些业务场景中,前端需要在某个字段中发送一个复杂的嵌套对象给后台做保存并处理。虽然axios可配置发送方式(post/get等),但如果不做其他配置,post的数据其实也是拼在请求地址后面,而这种传输方式会有很多问题:一是可能数据丢失,二是get传送的数据长度有limit,如果需要保存大段的中文,会报错;三是数据不直观,复杂对象的格式会出现问题。

一、项目情形

现在vue项目中,一般使用axios发送请求去后台拉取数据。

在某些业务场景中,前端需要在某个字段中发送一个复杂的嵌套对象给后台做保存并处理。虽然axios可配置发送方式(post/get等),但如果不做其他配置,post的数据其实也是拼在请求地址后面,而这种传输方式会有很多问题:一是可能数据丢失,二是get传送的数据长度有limit,如果需要保存大段的中文,会报错;三是数据不直观,复杂对象的格式会出现问题。

二、解决方案

怎么实现使用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)=>{
    //逻辑代码
}
  1. 完成第一步后,可以实现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]

对象跟数组的每一项都被拆拼成键值对,数据格式非常不直观,如果后台需要将整个数据保存以便下次取用,会不方便。
  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发送复杂对象的一点思考


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Big Java Late Objects

Big Java Late Objects

Horstmann, Cay S. / 2012-2 / 896.00元

The introductory programming course is difficult. Many students fail to succeed or have trouble in the course because they don't understand the material and do not practice programming sufficiently. ......一起来看看 《Big Java Late Objects》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

MD5 加密
MD5 加密

MD5 加密工具