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

﹏ヽ暗。殇╰゛Y 2022-05-24 11:37 268阅读 0赞

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

逐渐摸透了它的脾气。

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

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

![Center][]

然后我们看后端：

![Center 1][]

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

![Center 2][]

我们再切到后台：

![Center 3][]

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

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

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

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

\[javascript\]  [view plain][]   [copy][view plain]

1.  **var** params = **new** URLSearchParams();  
2.  params.append('param1', 'value1');  
3.  params.append('param2', 'value2');

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

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

\[javascript\]  [view plain][]   [copy][view plain]

1.  **import** Vue from 'vue'  
2.  **import** querystring from 'querystring'  
3.  **import** axios from "axios"  
4.    
5.  **export** **const** baseURL = process.env.NODE\_ENV === 'production' ? '/' : '/api';  
6.    
7.    
8.  **export** **const** http = axios.create(\{  
9.    baseURL: baseURL,  
10.   timeout: 10000,  
11.   withCredentials: **true**,  
12.   headers: \{ 'X-Requested-With': 'XMLHttpRequest'\},  
13.   transformRequest: \[data => \{  
14.     **return** querystring.stringify(data);  
15.   \}\]  
16. \});

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

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

\[javascript\]  [view plain][]   [copy][view plain]

1.  **this**.$http.post('/Home/GetInfo',\{  
2.          sName:"yangxu",  
3.          sId:20  
4.        \})  
5.         .then(**function** (response) \{  
6.           console.log(response);  
7.         \})  
8.         .**catch**(**function** (error) \{  
9.           console.log(error);  
10.        \});

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

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

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

先看业务场景截图：

![Center 4][]

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

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

![Center 5][]

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

[Center]: /images/20220524/e2b5c541a5c34f689b597d7fe2121005.png
[Center 1]: /images/20220524/19116a0ff39a46fea66202d00c37e0f2.png
[Center 2]: /images/20220524/986e293481bc4bce903105500e1c78b4.png
[Center 3]: /images/20220524/a254063c8d03465b9f6469351818286d.png
[view plain]: https://blog.csdn.net/brave_coder/article/details/78379073#
[Center 4]: /images/20220524/50e552823e0d43e990c342f9815eb27c.png
[Center 5]: /images/20220524/242ac12217964398a58951a583633b21.png