axios和ajax本质和实际的区别

不念不忘少年蓝@ 2023-02-10 14:29 4阅读 0赞

## 本质： ##

**axios：**  
Axios，基于 **Promise** 的 HTTP 客户端，可以工作于浏览器中，也可以工作于 **node.js** 中。axios通过promise实现对ajax的一种封装，就像jQuery实现ajax封装一样。  
**功能**：

*  从浏览器中创建 XMLHttpRequest
 *  从 node.js 中创建 http 请求
 *  支持 Promise API
 *  拦截请求和响应
 *  转换请求和响应数据
 *  取消请求
 *  自动转换 JSON 数据
 *  客户端支持防止 XSRF 攻击

**ajax：**  
Ajax 应用的主要特点是使用脚本操纵 HTTP 和 Web 服务器进行数据交换，不会导致页面重载。ajax实现了网页的局部数据刷新。  
**总的来说：axios是ajax， ajax不止axios。**

## 实际： ##

> axios 和 ajax 的使用方法基本一样，只有个别参数不同。

**axios：**

axios({ 
    	url: '/getName',
    	method: 'get',
    	responseType: 'json',  // 默认的
    	data: { 
    		name:'tom'
    	}
    }).then(function (response) { 
    	console.log(response);
    	console.log(response.data);
    }).catch(function (error) { 
    	console.log(error);
    });

**ajax：**

$.ajax({ 
    	url: '/getName',
    	type: 'get',
    	dataType: 'json',
    	data: { 
    		name:'tom'
    	},
    	success: function (response) { 
    		console.log(response)；
    	}
    });

## 总结：（优缺点） ##

**axios：**

*  从 node.js 创建 http 请求
 *  支持 Promise API
 *  客户端支持防止CSRF
 *  提供了一些并发请求的接口

**ajax：**

*  本身是针对MVC的编程,不符合现在前端MVVM的浪潮。
 *  基于原生的XHR开发，XHR本身的架构不清晰，已经有了fetch的替代方案。
 *  jQuery整个项目太大，单纯使用ajax却要引入整个JQuery非常的不合理（采取个性化打包的方案又不能享受CDN服务。