fetch、axios 和 XMLHttpRequest的区别

fetch、axios和 XMLHttpRequest的区别

XMLHttpRequest (XHR)

官方文档：https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest

XMLHttpRequest (XHR) 是一种在客户端和服务器之间进行异步数据交换的技术，它允许浏览器向服务器发送HTTP请求，获取数据并更新部分网页内容，而无需刷新整个页面。XHR 是现代Web开发中常用的一种技术，用于实现AJAX（Asynchronous JavaScript and XML）请求和数据交互。

XHR的优势在于它可以在不刷新整个页面的情况下获取服务器数据并更新页面，从而实现更加流畅的用户体验。它在Web开发中广泛用于实现动态内容加载、表单提交、数据交互等功能。但也需要注意，由于XHR可以跨域请求数据，可能会涉及到安全性问题，因此在使用XHR时需要谨慎处理跨域请求和防止XSS攻击。

现代Web开发中更常使用fetch或axios等工具库来进行网络请求，因此XMLHttpRequest已逐渐被废弃。

XMLHttpRequest 和 fetch区别

1. XMLHttpRequest 是较早的浏览器提供的 API，使用起来相对复杂。它需要手动创建、配置和发送请求，并监听事件来处理响应。
   fetch 是较新的浏览器提供的 API，使用起来更加简洁和易用。它返回一个 Promise 对象，可以使用链式调用来处理请求和响应。

2. XMLHttpRequest 可以通过设置 onreadystatechange 事件监听器或使用 addEventListener 方法来处理异步请求的状态变化。
   fetch 返回的 Promise 对象可以使用 then 和 catch 方法来处理请求的成功和失败。

3. XMLHttpRequest 兼容性非常好，可以在大多数现代浏览器中使用。
   fetch 是较新的标准，相对于 XMLHttpRequest，它在一些旧版本的浏览器中可能不被支持。为了兼容旧版本浏览器，可能需要使用 fetch 的 polyfill 或使用其他库（如 Axios）进行网络请求。

axios 和 fetch区别

xios 和 fetch 都是用于发起网络请求的工具，它们有一些区别和特点。

以下是 axios 和 fetch 的一些区别：

1. API 设计和使用方式：

axios 是一个基于 Promise 的 HTTP 客户端，提供了丰富而灵活的 API，使用起来更加简单和直观。
fetch 是浏览器原生提供的 API，返回的是一个 Promise 对象，使用起来相对较简洁，但需要手动处理和转换响应数据。

2. 浏览器兼容性：

fetch 是标准中的新API，相对较新，可能在一些旧版本的浏览器中不被完全支持。为了兼容旧版本浏览器，可能需要使用 fetch 的 polyfill 或其他库（如 axios）进行兼容处理。

3. 请求和响应拦截：

axios 提供了请求和响应拦截器的功能，可以进行全局和局部的拦截、转换和处理。
fetch API 并没有内置的拦截器功能，需要手动编写和管理拦截逻辑。

4. 错误处理：

axios 在网络请求错误时，会自动抛出一个错误，方便进行错误处理和捕获。
fetch API 在网络请求错误时，并不会自动抛出错误，需要手动检查响应状态码来判断是否请求成功，并进行相应的错误处理。

5. 功能扩展：

axios 提供了丰富的功能扩展，如请求取消、并发请求、请求重试等。
fetch API 功能相对较简单，需要通过额外的库或手动编写代码来扩展其功能。

总计：axios 提供了更多的功能和便利性，适用于复杂的请求场景和需要更多控制的情况。而 fetch 是浏览器原生的 API，适用于简单的请求和对浏览器兼容性要求较高的场景。