WHAT - xmlhttprequest vs fetch vs wretch

前言
- [1. XMLHttpRequest (XHR)](#1. XMLHttpRequest (XHR))
- [2. fetch](#2. fetch)
- [3. wretch](#3. wretch)
- 总结
fetch
- [1. 简洁性和易用性](#1. 简洁性和易用性)
- [2. 错误处理](#2. 错误处理)
- [3. 默认行为和功能扩展](#3. 默认行为和功能扩展)
- [4. 请求和响应的处理](#4. 请求和响应的处理)
- [5. 跨域请求和 CORS](#5. 跨域请求和 CORS)
- [6. 现代 Web 开发需求](#6. 现代 Web 开发需求)
[fetch vs xhr 代码示例](#fetch vs xhr 代码示例)
- [使用 XMLHttpRequest](#使用 XMLHttpRequest)
- [使用 fetch](#使用 fetch)
- 代码对比

前言

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

1. XMLHttpRequest (XHR)

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

示例：

javascript 复制代码

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();

2. fetch

官方文档

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

示例：

javascript 复制代码

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));

3. wretch

官方文档

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

示例：

javascript 复制代码

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));

总结

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 数据，并处理响应。

代码示例：

javascript 复制代码

// 创建 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();

使用 fetch

代码示例：

javascript 复制代码

// 使用 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); // 打印错误信息
  });

代码对比

创建请求：
- XMLHttpRequest ：需要创建一个对象，设置请求方法和 URL，调用 open 方法。
- fetch ：直接调用 fetch 函数并传递 URL 和配置选项。
配置请求：
- XMLHttpRequest ：需要额外设置请求的响应类型，并处理请求的状态变化（使用 onreadystatechange）。
- fetch ：响应解析（如 JSON）通常在 then 链中处理，不需要配置响应类型。
处理响应：
- XMLHttpRequest ：需要检查 readyState 和 status，然后手动解析响应。
- fetch：基于 Promises 的链式调用，自动处理解析和错误捕获，更直观。
错误处理：
- XMLHttpRequest：通常需要自己处理各种可能的错误情况。
- fetch ：通过 catch 捕获网络错误和其他异常，错误处理更为集中和简洁。
响应类型：
- XMLHttpRequest ：响应类型需手动设置（如 responseType = 'json'）。
- fetch ：通常解析为 JSON 或其他格式（如 response.text()），无须手动设置响应类型。

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

WHAT - xmlhttprequest vs fetch vs wretch

目录

前言

1. XMLHttpRequest (XHR)

2. fetch

3. wretch

总结

fetch

1. 简洁性和易用性

2. 错误处理

3. 默认行为和功能扩展

4. 请求和响应的处理

5. 跨域请求和 CORS

6. 现代 Web 开发需求

fetch vs xhr 代码示例

使用 XMLHttpRequest

使用 fetch

代码对比