Fetch 与 XMLHttpRequest(XHR)对比
Fetch
-
现代API ：Fetch是ES6中新增的全局函数，提供了更现代、简洁的HTTP请求处理方式。
-
基于Promise ：使用Promise，支持异步操作，可以链式调用
.then()方法处理响应。 -
简洁语法 ：语法更加简洁，使用
async/await，易于理解和维护。 -
同构性 ：支持服务器端渲染(SSR)，可以使用
isomorphic-fetch。 -
请求拦截 ：可以拦截301、302等跳转，但无法终止请求。
-
默认不携带Cookie ：除非手动配置，否则默认不会携带cookies。
-
不支持超时控制 ：使用
setTimeout和Promise.reject实现的超时控制不能阻止请求继续运行。 -
无进度监听 ：没有原生检测请求进度的方式。
XMLHttpRequest(XHR)
-
传统API ：XHR是浏览器提供的原生API，用于在不刷新页面的情况下请求特定URL获取数据。
-
事件驱动 ：提供了
onload、onerror、onprogress等事件来监听请求状态变化。 -
支持同步和异步 ：可以通过设置
async参数为false来使用同步模式。 -
自动携带Cookies ：请求会自动携带cookies，除非手动设置
credentials属性。 -
请求取消能力 ：可以取消一个正在进行的请求。
-
响应类型处理 ：
responseType属性可以设置响应类型(如text、json、blob等)。 -
进度监听 ：可以监听上传和下载的进度。
-
错误处理 ：在网络错误时reject Promise，其他错误会视为成功响应，需要手动判断。
-
兼容性 ：兼容性较好，在一些旧版本浏览器中可能无法使用Fetch。
总结
-
现代性与简洁性 ：Fetch更现代、简洁，基于Promise，易于使用。
-
功能丰富性 ：XHR功能更丰富，支持同步请求、请求取消、进度监听等。
-
浏览器兼容性 ：XHR兼容性更好，在一些旧浏览器中可用，而Fetch可能需要polyfill。
-
使用场景 ：根据项目需求和浏览器兼容性考虑选择使用Fetch或XHR。
希望这些信息能帮助你更好地理解Fetch和XHR的区别