WHAT - xmlhttprequest vs fetch vs wretch

前言

根据标题我们可以知道今天主要介绍三个内容：xmlhttprequest、fetch、wretch。这几个工具都是用于在 JavaScript 中进行 HTTP 请求的，但是它们有不同的特点和使用场景。我们来逐一分析。

1. XMLHttpRequest (XHR)

官方文档

• 特点：

  • 这是一个较老的 API，用于在浏览器中进行 HTTP 请求。
  • 支持同步和异步请求（虽然同步请求在现代浏览器中已不推荐使用）。
  • 配置和使用相对复杂，需要处理更多的回调和状态管理。

• 示例：

  var xhr = new XMLHttpRequest();
  xhr.open('GET', 'https://api.example.com/data', true);
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
      console.log(xhr.responseText);
    }
  };
  xhr.send();
  1
  2
  3
  4
  5
  6
  7
  8

2. fetch

官方文档

• 特点：

  • 是现代浏览器中推荐使用的 API，用于进行 HTTP 请求。
  • 基于 Promises，支持链式调用和更简洁的语法。
  • 默认情况下只处理 HTTP 响应的状态码，不会自动抛出错误，需手动检查响应的状态。

• 示例：

  fetch('https://api.example.com/data')
    .then(response => {
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      return response.json();
    })
    .then(data => console.log(data))
    .catch(error => console.error('There was a problem with your fetch operation:', error));
  1
  2
  3
  4
  5
  6
  7
  8
  9

3. wretch

官方文档

• 特点：

  • 是一个第三方库，建立在 fetch 之上，提供更强大的功能和更简洁的语法。
  • 支持链式调用、请求拦截器、响应拦截器、自动解析 JSON 等。
  • 可以通过插件和中间件扩展功能。

• 示例：

  import wretch from 'wretch';
  
  wretch('https://api.example.com/data')
    .get()
    .json()
    .then(data => console.log(data))
    .catch(error => console.error('There was a problem with your request:', error));
  1
  2
  3
  4
  5
  6
  7

总结

• XMLHttpRequest 是较老的 API，适用于兼容性要求较高的场景，但使用起来较为复杂。
• fetch 是现代的原生 API，提供了更简洁的语法和基于 Promises 的异步处理。
• wretch 是一个基于 fetch 的库，进一步简化了 API，并提供了更多功能和灵活性，适用于需要更复杂请求处理的场景。

选择哪个工具取决于你的项目需求和个人偏好。如果你需要兼容旧浏览器或在已有代码中使用，XMLHttpRequest 可能是必要的。如果你倾向于现代化的编程风格，fetch 是推荐的选择。如果你想要额外的功能和更易用的 API，wretch 是一个很好的选择。

fetch

XMLHttpRequest (XHR) 在它推出的时代是处理浏览器中 HTTP 请求的主要方法，但随着技术的发展和需求的变化，开发者们发现了它的一些不足之处，这些不足促使了 fetch 规范的推出。

以下是一些主要原因：

1. 简洁性和易用性

• XMLHttpRequest：

  • 处理回调函数和状态变化较复杂，需要手动管理许多状态和回调（如 onreadystatechange）。
  • 语法较繁琐，需要额外的代码来检查请求状态和处理错误。

• fetch：

  • 基于 Promises，使得异步代码的编写更简单、易读，支持链式调用。
  • 更加简洁的语法，消除了繁琐的回调和状态管理。

2. 错误处理

• XMLHttpRequest：

  • 错误处理依赖于检查 status 代码，并且对于网络错误（如无法连接服务器）通常需要额外的逻辑来处理。

• fetch：

  • 主要依赖于 Promises 的 .catch() 方法来处理请求错误。
  • 只会对网络错误抛出异常，而 HTTP 错误状态（如 404 或 500）仍会被当作正常的响应处理，需要手动检查响应状态。

3. 默认行为和功能扩展

• XMLHttpRequest：

  • 不支持一些现代网络请求的功能，如流式处理。
  • 处理 JSON 数据时需要手动解析，且不支持一些高级的请求功能。

• fetch：

  • 内置了对流的支持，能够处理大数据的流式读取。
  • 自动处理请求和响应的序列化和反序列化（如 JSON）。

4. 请求和响应的处理

• XMLHttpRequest：

  • 处理请求和响应的流程相对复杂，需要设置多个事件处理函数。

• fetch：

  • 通过一个简洁的 API 来配置请求，响应处理更为直接。
  • 提供了更多灵活的配置选项，如自定义请求头和方法。

5. 跨域请求和 CORS

• XMLHttpRequest：

  • 跨域请求的处理较复杂，需要配置 CORS 头部，并且有时需要处理更多的兼容性问题。

• fetch：

  • 内置对 CORS 的支持，配置更简单，并且提供了更细粒度的控制。

6. 现代 Web 开发需求

• XMLHttpRequest：

  • 设计时没有考虑到现代 Web 开发的一些需求，如更复杂的请求、响应流处理和更高效的异步处理。

• fetch：

  • 设计时考虑了现代 Web 的需求，支持更复杂的请求和响应处理，更好地与现代 JavaScript 的异步处理模式（如 async/await）兼容。

总之，fetch 的推出是为了满足现代 Web 开发对更简洁、灵活和强大的 HTTP 请求处理的需求。它不仅改进了 XMLHttpRequest 的不足，还融入了更符合当前开发需求的设计理念。

fetch vs xhr 代码示例

下面是用 XMLHttpRequest 和 fetch 处理相同 HTTP 请求的代码示例。这将有助于比较它们的语法和处理方式。

使用 XMLHttpRequest

假设我们要从一个 API 获取 JSON 数据，并处理响应。

代码示例：

// 创建 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();

// 配置请求：GET 方法，请求 URL，异步方式
xhr.open('GET', 'https://api.example.com/data', true);

// 设置响应类型为 JSON
xhr.responseType = 'json';

// 监听请求状态变化
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) { // 请求完成
    if (xhr.status === 200) { // 请求成功
      console.log(xhr.response); // 打印响应数据
    } else {
      console.error('请求失败，状态码：', xhr.status);
    }
  }
};

// 发送请求
xhr.send();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

使用 fetch

代码示例：

// 使用 fetch 发起 GET 请求
fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) { // 检查响应状态
      throw new Error('网络响应不是 OK');
    }
    return response.json(); // 解析 JSON 数据
  })
  .then(data => {
    console.log(data); // 打印响应数据
  })
  .catch(error => {
    console.error('请求失败:', error); // 打印错误信息
  });
1
2
3
4
5
6
7
8
9
10
11
12
13
14

代码对比

1. 创建请求：

   • XMLHttpRequest：需要创建一个对象，设置请求方法和 URL，调用 open 方法。
   • fetch：直接调用 fetch 函数并传递 URL 和配置选项。

2. 配置请求：

   • XMLHttpRequest：需要额外设置请求的响应类型，并处理请求的状态变化（使用 onreadystatechange）。
   • fetch：响应解析（如 JSON）通常在 then 链中处理，不需要配置响应类型。

3. 处理响应：

   • XMLHttpRequest：需要检查 readyState 和 status，然后手动解析响应。
   • fetch：基于 Promises 的链式调用，自动处理解析和错误捕获，更直观。

4. 错误处理：

   • XMLHttpRequest：通常需要自己处理各种可能的错误情况。
   • fetch：通过 catch 捕获网络错误和其他异常，错误处理更为集中和简洁。

5. 响应类型：

   • XMLHttpRequest：响应类型需手动设置（如 responseType = 'json'）。
   • fetch：通常解析为 JSON 或其他格式（如 response.text()），无须手动设置响应类型。

总体来说，fetch 提供了更现代和简洁的 API，使得 HTTP 请求的处理更为方便和直观。