XHR 和 Fetch 的区别

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

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

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

XMLHttpRequest(XHR)

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

特点

  1. 异步请求: XHR 允许发送异步请求,这意味着浏览器不需要等待请求完成就可以继续执行后续的代码,从而提高了页面的响应速度和用户体验。

  2. 跨域请求: XHR 可以用于跨域请求,但受到同源策略的限制,需要通过服务器端设置相应的跨域资源共享(CORS)头信息才能实现跨域请求。

  3. 支持多种数据格式: XHR 可以用于请求各种数据格式的资源,包括文本、JSON、XML、HTML 等,同时也支持发送和接收二进制数据。

  4. 事件驱动: XHR 是基于事件的设计,可以通过设置事件处理函数来监听请求状态的变化,如 readyState 的改变、请求完成等,以及处理响应数据。

  5. 适用性广泛: XHR 可以在所有现代浏览器中使用,并且在早期的 IE 版本中也有相应的支持,因此具有很好的兼容性。

 工作原理

  1. 创建 XMLHttpRequest 对象: 首先,通过 JavaScript 创建一个新的 XMLHttpRequest 对象,可以使用构造函数 new XMLHttpRequest() 来创建。

  2. 配置请求参数: 使用 XMLHttpRequest 对象的方法和属性来配置请求的参数,包括请求的方法(GET、POST 等)、请求的 URL、是否异步等。

  3. 设置回调函数: 通过设置 XMLHttpRequest 对象的事件处理函数(比如 onreadystatechangeonload 等),来定义在请求状态变化或者请求完成时要执行的逻辑。

  4. 发送请求: 调用 XMLHttpRequest 对象的 send 方法来发送请求,如果是 POST 请求,可以在 send 方法中传递请求体的数据。

  5. 处理响应: 当服务器返回响应时,通过事件处理函数或者轮询 XMLHttpRequest 对象的状态,来获取并处理服务器返回的响应数据。

  6. 处理错误: 在请求过程中或者处理响应时,可能会出现错误,此时可以通过事件处理函数或者轮询 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,提供了更简洁、清晰的方式来进行网络请求。

特点

  1. 基于 Promise:Fetch API 是基于 Promise 对象设计的,使得处理网络请求变得更加直观和易于管理。Promise 的特性可以帮助开发者更好地处理异步操作和错误。

  2. 更简洁的语法:Fetch API 的语法相对于传统的 XMLHttpRequest 更加简洁和易于理解,使得代码编写和维护变得更加高效。

  3. 内置的 Response 对象:Fetch API 返回的 Response 对象提供了丰富的方法和属性,用于处理请求的响应,例如读取响应数据、处理 HTTP 头信息等。

  4. 支持跨域请求:Fetch API 支持跨域请求,并且在处理跨域请求时提供了更加友好和灵活的方式,使得跨域请求变得更加便捷。

  5. 更灵活的配置选项:Fetch API 提供了丰富的配置选项,可以轻松地设置请求的参数,包括请求方法、请求头部、请求体等。

工作原理 

  1. 发起请求: 使用 fetch 函数发起网络请求,fetch 函数接受一个参数,即要请求的资源的 URL,以及可选的配置对象,包括请求方法、请求头、请求体等信息。

  2. 返回 Promise: fetch 函数返回一个 Promise 对象,这意味着我们可以使用 Promise 的方法(如 then、catch)来处理请求的结果。

  3. 处理响应: 在 Promise 的 then 方法中,我们可以获得一个 Response 对象,该对象包含了从服务器返回的响应信息,比如状态码、响应头以及响应的内容。

  4. 处理响应数据: 我们可以通过 Response 对象提供的方法(如 json()、text() 等)来处理响应的内容,根据响应的内容类型,将其解析为合适的格式,比如 JSON 格式或者文本格式。

  5. 处理错误: 如果请求失败(比如网络错误或者服务器返回错误状态码),可以通过 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 也表现出了更多的优势。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值