前后分离（一）---前后端数据交互，axios和jquery ajax的区别

2018年05月26日 11:47:55 心诚则灵--艾 阅读数 7669

axios作为Vue生态系统中浓墨重彩的一笔，我学习这个东西也是花了一定的时间的。刚开始的时候，也是遇到了很多问题。

逐渐摸透了它的脾气。

首先说说FormData和Payload两种数据格式的区别：

先是提交一个FormData的请求试试看：

然后我们看后端：

然后我们提交一个以Payload传输数据的请求：

我们再切到后台：

这就是使用axios和jquery ajax最大的区别。

jquery提交数据的时候，默认是以FormData的形式提交的，也就是Content-Type:"application/x-www-form-urlencoded",

而默认axios是使用的是Payload形式提交数据，也就是Content-Type:"application/json"

如何切换呢，我们需用应用以下方式：

var params = new URLSearchParams();  

params.append('param1', 'value1');  

params.append('param2', 'value2');  

它的意思，其实就是把这样的数据（对象）{ name:"yangxu",age:23 } 转换成这样的数据（字符串） "name=yangxu&age=23"这样的查询字符串。

如果我们每次需要传递数据的时候，都这样写，是很复杂的，于是，我们可以进行一次全局配置，将请求数据按照需求进行相应的转化：

import Vue from 'vue'  

import querystring from 'querystring'  

import axios from "axios"  

export const baseURL = process.env.NODE_ENV === 'production' ? '/' : '/api';  

export const http = axios.create({  

  baseURL: baseURL,  

  timeout: 10000,  

withCredentials:true,  

headers: {'X-Requested-With': 'XMLHttpRequest'},  

  transformRequest: [data => {  

return querystring.stringify(data);  

  }]  

});  

然后，我们可以把这个axios的实例挂在到Vue的原型上：Vue.prototype.$http=http;

然后在Vue的组件里面，就可以这样用：

this.$http.post('/Home/GetInfo',{  

        sName:"yangxu",  

        sId:20  

 })  

.then(function (response) {  

         console.log(response);  

       })  

.catch(function (error) {  

         console.log(error);  

       });  

这样，问题虽然解决了，我们需要进行反思。

FormData和Payload传输数据应用场景：我个人根据自己的实际开发进行总结得出，如果前台提交给后台的数据是确定的（什么是确定的，就是你提交的数据格式不会因为用户的操作而改变，如可选项，用户填写了那么提交，没就不提交，后台接收是可空类型），如果是不确定的（比如我用户点击一个操作，就必须新增一条数据，后台记录的是前台提交过去的数组），此时可以采用Payload形式提交。总之，根据自己的业务选择合适的数据提交方式。

有一种特殊的业务场景，就是需要进行文件上传的时候，此时我们只能采用Payload的形式上传。

先看业务场景截图：

我们想在上传文件的时候，并且同时带给后端一些数据，那么，我们采用HTML5提供的FormData API，这个对象比较特殊，不要尝试破坏它的结构，否则是无法上传的，具体的使用方式请参考MDN。

此时，我们需要对我们的transformRequest方法进行一些修改：

我们在调用的时候，手动指定Content-Type为“application/json”，告诉axios不要对我们的数据进行任何操作即可。