weixin_58540586的博客

根据标题我们可以知道今天主要介绍三个内容：xmlhttprequest、fetch、wretch。这几个工具都是用于在 JavaScript 中进行 HTTP 请求的，但是它们有不同的特点和使用场景。我们来逐一分析。是较老的 API，适用于兼容性要求较高的场景，但使用起来较为复杂。fetch是现代的原生 API，提供了更简洁的语法和基于 Promises 的异步处理。wretch是一个基于fetch的库，进一步简化了 API，并提供了更多功能和灵活性，适用于需要更复杂请求处理的场景。

是一个强大的数据获取库，适用于 React 和其他前端框架，专注于异步状态管理。它简化了远程数据获取、缓存、更新和同步的流程。TanStack Query = 功能强大，适合中大型项目和复杂数据交互需求。SWR = 轻量灵活，适合简单的数据获取场景或快速开发。

SWR 是一个用于数据请求的 React Hooks 库，它的名字来源于 stale-while-revalidate，即利用缓存来提供即时响应并在后台更新数据的策略。

封装一个规范的请求通常涉及到以下几个方面：1. 请求方法（GET、POST 等）2. 请求参数构造（根据使用的请求库，包括不同 Method 要求的 params 格式、空值处理等）3. 格式转换（如请求体和返回体参数的下划线格式和驼峰格式转换，一般前端会用驼峰命名格式，后台会用下划线命名格式）4. 请求头构造（根据不同请求类型，比如 json、form、multipartd等）5. 返回体处理（包括成功和错误处理等，错误处理包括错误信息收集和异常抛出）

在我们已介绍过 swr 请求方案。今天主要介绍 ahooks 及其与 swr 的区别。

安装和引入：通过 npm 或 yarn 安装并引入wretch。基本请求：使用链式调用发起请求，支持GETPOSTPUTDELETE等 HTTP 方法。请求和响应拦截器：可以在请求和响应阶段进行修改或处理。自动 JSON 解析：默认处理 JSON 数据，简化了数据解析的过程。URL 拼接：方便地添加查询参数。wretch提供了一个现代化的、易于使用的 HTTP 请求 API，适合用于需要简洁和强大功能的项目中。Addons：用于扩展wretch的功能，如认证和重试。

请求取消（Request Cancellation）是现代 Web 应用程序中的一个重要功能，特别是在处理长时间运行的请求、用户交互频繁的操作以及网络不稳定的情况下。

Axios 是基于和Promise进行封装的 HTTP 客户端。在浏览器环境下，Axios 使用发送 HTTP 请求，并基于它进行封装，提供更简洁的 API 和更好的错误处理机制。例如，它支持请求和响应的拦截器、超时设置、请求取消等功能，而这些都需要额外的封装才能在中实现。Node.js 的 http 模块在 Node.js 环境下，Axios 使用http或https模块代替发送 HTTP 请求，从而实现跨环境的兼容性。PromiseAxios 的 API 是基于Promise。