XHR 和 Fetch 的区别

最新推荐文章于 2025-04-12 09:25:13 发布

追涨杀跌的小韭菜

最新推荐文章于 2025-04-12 09:25:13 发布

阅读量1.2k

点赞数 1

分类专栏： js 文章标签：前端 javascript

本文链接：https://blog.csdn.net/qq_32054169/article/details/134391435

版权

js 专栏收录该内容

18 篇文章

订阅专栏

本文比较了XMLHttpRequest和Fetch在异步请求、跨域处理、语法简洁性和功能扩展性上的差异，强调Fetch在现代Web开发中的优势，尤其是其基于Promise的优雅设计和对StreamAPI的支持。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

XMLHttpRequest（XHR）和 Fetch 都是用于在浏览器中发起网络请求的技术，它们有一些重要的区别，以下是它们的详细总结：

XMLHttpRequest（XHR）

XHR 是一个基于事件驱动的 API，用于在浏览器中发起异步的HTTP请求。

特点

异步请求： XHR 允许发送异步请求，这意味着浏览器不需要等待请求完成就可以继续执行后续的代码，从而提高了页面的响应速度和用户体验。
跨域请求： XHR 可以用于跨域请求，但受到同源策略的限制，需要通过服务器端设置相应的跨域资源共享（CORS）头信息才能实现跨域请求。
支持多种数据格式： XHR 可以用于请求各种数据格式的资源，包括文本、JSON、XML、HTML 等，同时也支持发送和接收二进制数据。
事件驱动： XHR 是基于事件的设计，可以通过设置事件处理函数来监听请求状态的变化，如 readyState 的改变、请求完成等，以及处理响应数据。
适用性广泛： XHR 可以在所有现代浏览器中使用，并且在早期的 IE 版本中也有相应的支持，因此具有很好的兼容性。

工作原理

创建 XMLHttpRequest 对象： 首先，通过 JavaScript 创建一个新的 XMLHttpRequest 对象，可以使用构造函数 new XMLHttpRequest() 来创建。
配置请求参数： 使用 XMLHttpRequest 对象的方法和属性来配置请求的参数，包括请求的方法（GET、POST 等）、请求的 URL、是否异步等。
设置回调函数： 通过设置 XMLHttpRequest 对象的事件处理函数（比如 onreadystatechange、onload 等），来定义在请求状态变化或者请求完成时要执行的逻辑。
发送请求： 调用 XMLHttpRequest 对象的 send 方法来发送请求，如果是 POST 请求，可以在 send 方法中传递请求体的数据。
处理响应： 当服务器返回响应时，通过事件处理函数或者轮询 XMLHttpRequest 对象的状态，来获取并处理服务器返回的响应数据。
处理错误： 在请求过程中或者处理响应时，可能会出现错误，此时可以通过事件处理函数或者轮询 XMLHttpRequest 对象的状态，来捕获错误并进行处理。

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

// 配置请求
xhr.open('GET', 'https://api.example.com/data', true);

// 设置回调函数来处理响应
xhr.onload = function() {
  if (xhr.status === 200) {
    // 请求成功的处理逻辑
    console.log(xhr.responseText);
  } else {
    // 请求失败的处理逻辑
    console.log('请求失败: ' + xhr.status);
  }
};

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

Fetch API

Fetch 是基于 Promise 的现代API，提供了更简洁、清晰的方式来进行网络请求。

特点

基于 Promise：Fetch API 是基于 Promise 对象设计的，使得处理网络请求变得更加直观和易于管理。Promise 的特性可以帮助开发者更好地处理异步操作和错误。
更简洁的语法：Fetch API 的语法相对于传统的 XMLHttpRequest 更加简洁和易于理解，使得代码编写和维护变得更加高效。
内置的 Response 对象：Fetch API 返回的 Response 对象提供了丰富的方法和属性，用于处理请求的响应，例如读取响应数据、处理 HTTP 头信息等。
支持跨域请求：Fetch API 支持跨域请求，并且在处理跨域请求时提供了更加友好和灵活的方式，使得跨域请求变得更加便捷。
更灵活的配置选项：Fetch API 提供了丰富的配置选项，可以轻松地设置请求的参数，包括请求方法、请求头部、请求体等。

工作原理

发起请求： 使用 fetch 函数发起网络请求，fetch 函数接受一个参数，即要请求的资源的 URL，以及可选的配置对象，包括请求方法、请求头、请求体等信息。
返回 Promise： fetch 函数返回一个 Promise 对象，这意味着我们可以使用 Promise 的方法（如 then、catch）来处理请求的结果。
处理响应： 在 Promise 的 then 方法中，我们可以获得一个 Response 对象，该对象包含了从服务器返回的响应信息，比如状态码、响应头以及响应的内容。
处理响应数据： 我们可以通过 Response 对象提供的方法（如 json()、text() 等）来处理响应的内容，根据响应的内容类型，将其解析为合适的格式，比如 JSON 格式或者文本格式。
处理错误： 如果请求失败（比如网络错误或者服务器返回错误状态码），可以通过 Promise 的 catch 方法来捕获错误并进行处理。

// 发起GET请求
fetch('https://api.example.com/data')
  .then(function(response) {
    if (!response.ok) {
      throw new Error('网络请求失败: ' + response.status);
    }
    return response.json();
  })
  .then(function(data) {
    // 请求成功的处理逻辑
    console.log(data);
  })
  .catch(function(error) {
    // 请求失败的处理逻辑
    console.log(error);
  });

总结

总的来说，Fetch API 相对于 XHR 具有更好的可读性、更优雅的语法以及更加强大的功能扩展性，因此在现代 Web 开发中越来越受到青睐。同时，基于 Promise 的设计使得 Fetch API 能够更好地与现代 JavaScript 的异步编程模式相融合，而且在一些新的特性支持方面（比如 Stream API），Fetch API 也表现出了更多的优势。