ajax和axios的使用和区别_$.ajax与axios的fromdata

学过前端框架Vue和Spring、SpringMVC之后，在数据交互时，都面临了一个问题，到底是使用ajax，还是axios，陷入了两难的境地。那么，这篇博客将细数疑惑，讲解两者之间的使用和区别。

一、ajax和axios的使用

1.1 ajax的使用

$.ajax({
　　url: '接口地址',
　　type: 'get', //或者post　　 请求类型
　　dataType: 'json',
　　data: { // 要发送的请求参数
　　　　'username' : 'admin',
　　　　'password' : '123'
　　},
　　success : function (response) {
　　　　console.log(response); // 请求返回的数据
　　}
})
1
2
3
4
5
6
7
8
9
10
11
12

1.2 axios的使用

axios({
　　url: '接口地址',
　　method: 'get', //或者 post    请求类型
　　responseType: 'json', //默认格式，如果就是 json 格式可以不写
　　data: {
　　　　'username' : 'admin',
　　　　'password' : '123'
　　}
}).then( function(response){ // 请求正确返回的数据
　　console.log(response);
　　console.log(response.data);
}).catch( function(error) { // 请求错误返回的数据
　　console.log(error);
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14

两者在使用上差别不大，写法几乎相同。

二、两者区别

axios是通过promise实现对ajax技术的一种封装，就像JQuery实现ajax封装一样。简单来说就是：ajax技术实现了网页的局部数据刷新，axios实现了对ajax的封装。也就是说，jQuery 将请求技术进行了封装 变成了 ajax , 而通过 promise 又把 ajax 进行封装就成了 axios。

三、各自优缺点

• ajax：
  本身针对MVC框架的编程，不符合现阶段的MVVM的开发模式。
  基于原生的XHR开发，XHR本身的架构不清晰，已经有了fetch的替代方案
  JQuery整个项目太大，单纯使用ajax却要引入整个JQuery非常的不合理（采取个性化打包的方案又不能享受CDN服务）
• axios：
  从 node.js 创建 http 请求
  支持 Promise API
  客户端支持防止CSRF
  提供了一些并发请求的接口（重要，方便了很多的操作）