Ajax，Fetch，Axios三者的区别！

1.Ajax

它的全称是：Asynchronous JavaScript And XML，翻译过来就是“异步的 Javascript 和 XML”。

很多小伙伴可能会误以为 Ajax 是发请求的一种方式，或者把 XMLHttpRequest 与 Ajax 划等号，其实这是错误和片面的。

正解：

Ajax 是一个技术统称，是一个概念模型，它囊括了很多技术，并不特指某一技术，它很重要的特性之一就是让页面实现局部刷新。

特点：

• 局部刷新页面，无需重载整个页面。

简单来说，Ajax 是一种思想，XMLHttpRequest 只是实现 Ajax 的一种方式。其中 XMLHttpRequest 模块就是实现 Ajax 的一种很好的方式，这也是很多面试官喜欢让面试者手撕的代码之一。

利用 XMLHttpRequest 模块实现 Ajax。

注意： 我们使用这种方式实现网络请求时，如果请求内部又包含请求，以此循环，就会出现回调地狱，这也是一个诟病，后来才催生了更加优雅的请求方式。

2.Fetch

Fetch 是在 ES6 出现的，它使用了 ES6 提出的 promise 对象。它是 XMLHttpRequest 的替代品。

很多小伙伴会把它与 Ajax 作比较，其实这是不对的，我们通常所说的 Ajax 是指使用 XMLHttpRequest 实现的 Ajax，所以真正应该和 XMLHttpRequest 作比较。

正解：

Fetch 是一个 API，它是真实存在的，它是基于 promise 的。

特点：

• 使用 promise，不使用回调函数。
• 采用模块化设计，比如 rep、res 等对象分散开来，比较友好。
• 通过数据流对象处理数据，可以提高网站性能。

所以这里就和 Ajax 又很大不同了，一个是思想，一个是真实存在的 API，不过它们都是用来给网络请求服务的，我们一起来看看利用 Fetch 实现网络请求。

其中最重要的特点之一就是采用了.then 链式调用的方式处理结果，这样不仅利于代码的可读，而且也解决了回调地狱的问题。

3.Axios

Axios 是独立的请求库，axios利用xhr进行了二次封装的请求库，xhr只是axios中的其中一个请求适配器，axios在nodejs端还有个http的请求适配器；axios = xhr + http；当然它并不是一个思想，或者一个原生 API，它是一个封装库。

正解：

Axios 是一个基于 promise 封装的网络请求库，它是基于 XHR 进行二次封装。

特点：

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

所以说，Axios 可以说是 XHR 的一个子集，而 XHR 又是 Ajax 的一个子集。既然说它是一个库，那么我们在使用的时候就需要引入它。

总结

Ajax、Fetch、axios三者之间的关系可以用一张图来清晰的表示，如图：

三者做个对比：

网络请求	特点
Ajax	一种技术统称，js异步技术的术语，主要利用XHR实现网络请求
Fetch	es6新增的用于网络请求标准api，基于promise，实现网络请求
Axios	一个封装库，基于XHR封装，用于网络请求的第三方库