XHR与Fetch的定义和功能
XHR（XMLHttpRequest）
XHR，全称为XMLHttpRequest，是浏览器提供的一个原生API，用于在JavaScript中异步地发送HTTP请求。它最早由IE5引入，目的是在不刷新整个页面的前提下，与服务器交换数据。XHR允许开发者发送异步请求，即在后台执行请求，而不会阻塞页面的其他操作。XHR提供了对请求和响应的完全控制，包括设置请求头、请求体、监听请求状态变化等功能。
Fetch API
Fetch API是ES6中新增的全局函数，提供了一种新的、现代的、基于Promise的异步网络请求方法。Fetch API的设计理念是为了解决XHR的一些缺陷，提供更简洁易用的API。Fetch返回一个Promise，使得异步编程更加简洁，易于理解和维护。Fetch API支持跨域请求，提供了更好的CORS支持，并且可以通过Promise的then和catch方法来处理响应。
XHR与Fetch的使用方法
XHR的使用方法
使用XHR发送请求的基本步骤包括创建XHR对象、打开请求、设置请求头部、发送请求、处理响应等。XHR对象提供了诸如open()、setRequestHeader()、send()、onreadystatechange等方法，以及responseText、responseXML等属性，以便开发者可以精确控制请求的每一个环节。
Fetch的使用方法
Fetch的使用则更加简洁，只需传入URL即可发起请求，并通过返回的Promise对象来处理响应。Fetch支持链式调用，例如可以使用.then()和.catch()来依次执行多个回调函数。Fetch还支持.json()、.text()等方法来解析响应数据。
XHR与Fetch的区别
| 特性 | XHR | Fetch |
| 对象类型 | XMLHttpRequest对象 | Promise对象 |
| 请求取消 | 支持 abort() 方法 |
不支持原生的请求取消 |
| 响应类型处理 | 通过responseType属性设置 |
需要手动解析响应 |
| 进度监听 | 支持onprogress事件 |
不支持 |
| Cookies处理 | 自动携带 | 默认不携带，需手动设置 |
| 错误处理 | 出现错误时会reject Promise | 只在网络错误时reject Promise |
| 跨域请求 | 需要手动设置withCredentials |
自动处理跨域请求 |
| 语法 | 较为复杂，需要手动设置请求头 | 简洁，链式调用 |
| 兼容性 | 较好，支持旧版本浏览器 | 主要是现代浏览器 |
以上表格总结了XHR和Fetch在使用上的主要区别。XHR适合需要精细控制请求和响应细节的场景，而Fetch则适合追求简洁代码和现代开发实践的项目。
结论
综上所述，XHR和Fetch都是用于发起HTTP请求的重要工具，它们各自有不同的优势和使用场景。XHR因其历史悠久和强大的功能，在一些旧项目中仍有广泛的应用。而Fetch以其简洁的语法和现代的Promise支持，逐渐成为了新项目的首选。开发者可以根据具体的项目需求和个人喜好，选择最适合的请求方式。
Fetch API 和 XHR(XMLHttpRequest) 都是用于向服务器发送网络请求并获取数据的技术，它们有一些相同和不同点：
Fetch API 使用 Promise 和 Response/Request 对象处理请求和响应，而 XHR 使用事件和 XMLHttpRequest 对象处理请求和响应。
Fetch API 支持流式响应处理，XHR 不支持。
Fetch API 更易于使用和学习，代码通常更简洁，而 XHR 的语法和实现比较复杂，需要编写一些回调函数。
Fetch API 支持跨域请求判断更为严格，需要服务器进行 CORS 配置，XHR 则有 CORS 跨域请求的设置和 JSONP 实现。
在浏览器中使用 Fetch API 绕过了原始的怪异行为和安全风险，如 XSS 安全漏洞，XHR 则需要进行一些额外的配置和注意事项来防止这些安全问题。
