你知道 XHR 和 Fetch 的区别吗？

前端老道

发布于 2024-03-18 14:53:53

9160

发布于 2024-03-18 14:53:53

文章被收录于专栏：Vue开发社区

现如今，网站开发普遍采用前后端分离的模式，数据交互成为了不可或缺的关键环节。在这个过程中，XHR 和 Fetch API 是两种最常见的方法，用于从 Web 服务器获取数据。XHR 是一种传统的数据请求方式，而 Fetch API 则代表了现代 Web 开发的新兴标准。接下来，我们将一同深入学习它们的使用方法和适用场景。

XMLHttpRequest

XMLHttpRequest，通常简称为 XHR。通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL，获取数据。XMLHttpRequest 在 AJAX 编程中（比如 jquery）被大量使用。

AJAX ：异步 JavaScript 和 XML。许多人容易把它和 jq 的 ajax 混淆。它是一个技术统称，本身不是一种技术。

特点

异步请求：XHR 允许进行异步请求，它可以在后台执行，而不会阻止页面的其他操作。
支持跨域请求：通过服务器端设置允许跨域请求，从不同域的服务器获取数据。
事件驱动：提供了 onload、onerror、onprogress 等一系列事件来监听请求的状态变化。
灵活性：提供了对请求头、响应头以及请求方法的完全控制，使其非常灵活。

工作原理

XHR 的工作原理主要为：

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

// 创建一个新的XHR对象
const xhr = new XMLHttpRequest();

// 配置请求
xhr.open("GET", "https://api.baidu.com/test", true);

// 设置响应处理函数
xhr.onload = function() {
  if (xhr.status === 200) {
    // 请求成功
    const responseData = xhr.responseText;
    console.log("成功获取数据：", responseData);
  } else {
    // 请求失败
    console.error("请求失败，状态码：" + xhr.status);
  }
};

// 发起请求
xhr.send();

XHR 的响应处理通常在onreadystatechange事件处理程序中完成。在上面的例子中，我们等待 XHR 对象的状态变为 4（表示请求完成）并且 HTTP 状态码为 200（表示成功响应）时，解析响应数据。

Fetch API

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

特点

Promise 风格：Fetch API 使用 Promise 对象来处理异步请求，使代码更具可读性和可维护性。
更简单的语法：相较于 XHR，Fetch API 的语法更加简单明了，通常只需要几行代码来完成请求。
默认不接受跨域请求：为了安全性，Fetch API 默认不接受跨域请求，但可以通过 CORS（跨域资源共享）来进行配置。
更现代的架构：Fetch API 是建立在 Promise 和 Stream 之上的，支持更灵活的数据处理和流式传输。

工作原理

Fetch 的工作原理主要为：

使用fetch()函数创建请求：传入要请求的 URL，以及可选的配置参数，例如请求方法、请求头等。
处理响应：fetch()返回一个 Promise，您可以使用.then()链式调用来处理响应数据，例如使用.json()方法解析 JSON 数据或.text()方法获取文本数据。
错误处理：您可以使用.catch()方法来捕获任何请求或响应的错误。
使用async/await：如果需要，您还可以使用async/await来更清晰地处理异步操作。

Fetch API 的特性和简单的语法使它在许多前端项目中成为首选工具。然而，它也有一些限制，例如不支持同步请求，因此需要谨慎使用。

fetch("https://api.baidu.com/test")
  .then(response => {
    if (!response.ok) {
      throw new Error("请求失败，状态码：" + response.status);
    }
    return response.json();
  })
  .then(data => {
    // 请求成功，处理响应数据
    console.log("成功获取数据：", data);
  })
  .catch(error => {
    // 请求失败，处理错误
    console.error(error);
  });