前言：网站开发普遍采用前后端分离的模式，数据交互成为了不可或缺的关键环节。在这个过程中，XHR 和 Fetch API 是两种最常见的方法，用于从 Web 服务器获取数据。XHR 是一种传统的数据请求方式，而 Fetch API 则代表了现代 Web 开发的新兴标准。网上搜了一堆，并没有发现一篇完整的对比性的文章，索性自己总结一下，供大家参考和指教。接下来，我们将一同深入学习它们的使用方法和适用场景。

常用库和插件

基于 XHR 封装的库

ajax：提供了用于处理 XHR 请求的便捷方法。
axios：一个流行的 HTTP 请求库，基于 XHR 开发，支持浏览器和 Node.js。
alova：基于async/await 的 HTTP 请求库，axios 是通过 promise 实现对 ajax 技术的一种封装，就像 jQuery 实现 ajax 封装一样。简单来说： ajax 技术实现了网页的局部数据刷新，axios 实现了对 ajax 的封装，alova实现了对axios的提升。axios 是 ajax，ajax 不止axios。

基于 fetch 封装的库

redaxios：它具有与 axios 类似的 API，但更轻量级且适用于现代 Web 开发。
umi-request：由 Umi 框架维护的网络请求库，提供了强大的拦截器、中间件和数据转换功能。

那么总结一下，浏览器支持的数据交互只有且仅有两种，XMLhttprequest 和 fetch；

一、从兼容性对比两种技术的差异；

1. XMLHttpRequest:
   XMLHttpRequest是一个较早引入的异步交互的API，因此在几乎所有现代浏览器中都有很好的兼容性。即使在较老版本的Internet Explorer中也支持。

其中 axios 和 alova等技术由于需要用到 promise 或 async/await，所以对浏览器也有一定的兼容性差异；

2、Fetch 的支持目前还处于早期的阶段，在 Firefox 39 以上，和 Chrome 42 以上都被支持了，如果你现在就想使用它，还可以用Fetch Polyfil，用于支持那些还未支持 Fetch 的浏览器。

aaa.jpg

一、从功能性对比两种技术的差异；

XHR 的工作原理主要为：

创建 XHR 对象实例：通过new XMLHttpRequest()创建一个 XHR 对象。
配置请求：使用open()方法设置请求方法（GET、POST 等）、URL，以及是否要异步执行请求。
设置回调函数：设置事件处理程序来处理请求完成、成功、失败等不同的状态。
发起请求：使用send()方法发送请求。
处理响应：在事件处理程序中处理响应数据，通常使用responseText或responseXML来访问响应内容。

特点

1、异步请求：XHR 允许进行异步请求，它可以在后台执行，而不会阻止页面的其他操作。

2、支持跨域请求：通过服务器端设置允许跨域请求，从不同域的服务器获取数据。

3、事件驱动：提供了 onload、onerror、onprogress 等一系列事件来监听请求的状态变化。

4、灵活性：提供了对请求头、响应头以及请求方法的完全控制，使其非常灵活。

Fetch API
Fetch 是一种现代的数据网络请求 API，它旨在解决 XHR 的一些问题，提供了更强大、更灵活的方式来处理 HTTP 请求。可以理解为 XMLHttpRequest 的升级版。

特点

1、Promise 风格：Fetch API 使用 Promise 对象来处理异步请求，使代码更具可读性和可维护性。

2、更简单的语法：相较于 XHR，Fetch API 的语法更加简单明了，通常只需要几行代码来完成请求。

3、默认不接受跨域请求：为了安全性，Fetch API 默认不接受跨域请求，但可以通过 CORS（跨域资源共享）来进行配置。

4、更现代的架构：Fetch API 是建立在 Promise 和 Stream 之上的，支持更灵活的数据处理和流式传输。

XHR 和 Fetch 的对比

XHR 和 Fetch 都用于进行 HTTP 请求，但它们之间存在一些关键区别：

语法： Fetch 使用 Promise，更直观和易于理解。
跨域请求： Fetch 在跨域请求方面更灵活，支持 CORS。
流式传输： Fetch 支持可读流，适用于大文件下载。
维护性： Fetch 更容易维护和扩展。