HOW - 快速上手 wretch（基于 fetch 的请求封装）

本文链接：https://blog.csdn.net/weixin_58540586/article/details/140934781

官网

https://elbywan.github.io/wretch/

wretch 是一个基于 fetch 的现代 JavaScript HTTP 请求库，它提供了简洁的 API 和丰富的功能来处理 HTTP 请求。

基本使用

以下是 wretch 的使用指南，包括如何安装、基本用法和一些高级功能。

安装

可以通过 npm 或 yarn 安装 wretch：

npm install wretch

或者：

yarn add wretch

基本用法

1. 发起基本请求

import wretch from 'wretch';

// 发起 GET 请求
wretch('https://api.example.com/data')
  .get()
  .json()
  .then(data => console.log(data))
  .catch(error => console.error('Request failed:', error));

2. 使用其他 HTTP 方法

import wretch from 'wretch';

// 发起 POST 请求
wretch('https://api.example.com/data')
  .post({ key: 'value' })
  .json()
  .then(data => console.log(data))
  .catch(error => console.error('Request failed:', error));

高级功能

1. 请求拦截器（Request Middleware）

可以使用拦截器来修改请求配置，例如添加请求头：

import wretch from 'wretch';

// 使用拦截器
wretch('https://api.example.com/data')
  .headers({ 'Authorization': 'Bearer token' })
  .get()
  .json()
  .then(data => console.log(data))
  .catch(error => console.error('Request failed:', error));

2. 响应拦截器（Response Middleware）

响应拦截器可以处理请求后的数据或错误：

import wretch from 'wretch';

// 使用响应拦截器
wretch('https://api.example.com/data')
  .get()
  .res(response => {
    // 在这里处理响应
    if (response.status >= 400) {
      throw new Error('Request failed with status ' + response.status);
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('Request failed:', error));

3. 错误处理

import wretch from 'wretch';

// 错误处理
wretch('https://api.example.com/data')
  .get()
  .json()
  .then(data => console.log(data))
  .catch(error => {
    // 错误处理逻辑
    console.error('Request failed:', error);
  });

4. JSON 处理

wretch 可以自动处理 JSON 数据的解析：

import wretch from 'wretch';

// 发起 GET 请求并自动解析 JSON
wretch('https://api.example.com/data')
  .get()
  .json() // 自动解析 JSON
  .then(data => console.log(data))
  .catch(error => console.error('Request failed:', error));

5. URL 拼接

使用 wretch 可以方便地拼接 URL：

import wretch from 'wretch';

// 拼接 URL 参数
wretch('https://api.example.com/data')
  .query({ key1: 'value1', key2: 'value2' })
  .get()
  .json()
  .then(data => console.log(data))
  .catch(error => console.error('Request failed:', error));

总结

安装和引入：通过 npm 或 yarn 安装并引入 wretch。
基本请求：使用链式调用发起请求，支持 GET、POST、PUT、DELETE 等 HTTP 方法。
请求和响应拦截器：可以在请求和响应阶段进行修改或处理。
自动 JSON 解析：默认处理 JSON 数据，简化了数据解析的过程。
URL 拼接：方便地添加查询参数。

wretch 提供了一个现代化的、易于使用的 HTTP 请求 API，适合用于需要简洁和强大功能的项目中。

addons、middlewares、index

wretch 是一个强大的 HTTP 请求库，提供了一些附加功能（Addons）、中间件（Middlewares）和索引（Index）来扩展其基本功能。这些功能使得请求和响应处理变得更加灵活和强大。

以下是对 wretch 的 Addons、middlewares 和 index 的介绍：

1. Addons

Addons 是 wretch 的扩展功能，可以通过插件机制来增强 wretch 的功能。常见的 addons 包括：

wretch.addons.auth：用于添加认证头，如 Bearer Token。
wretch.addons.retry：用于请求失败时自动重试。

示例：使用 auth Addon 添加认证头

import wretch from 'wretch';
import auth from 'wretch/addons/auth';

const api = wretch('https://api.example.com')
  .addon(auth({ token: 'your-token' }));

api.get('/data')
  .json()
  .then(data => console.log(data))
  .catch(error => console.error('Request failed:', error));

2. Middlewares

Middlewares 允许你在请求和响应的不同阶段插入自定义逻辑，以处理请求、响应或错误。这种方式可以用来添加通用的处理逻辑，比如日志记录、请求修改或响应拦截。

常见中间件功能：

logging：记录请求和响应的详细信息。
errorHandling：集中处理请求中的错误。

示例：自定义中间件

import wretch from 'wretch';

// 自定义请求中间件
const loggingMiddleware = req => {
  console.log('Request URL:', req.url);
  return req;
};

const api = wretch('https://api.example.com')
  .middleware(loggingMiddleware);

api.get('/data')
  .json()
  .then(data => console.log(data))
  .catch(error => console.error('Request failed:', error));

3. Index

Index 是 wretch 的核心功能集合，包括请求方法、配置选项和数据处理功能。wretch 提供了一些主要功能，通过这些功能你可以发起各种类型的 HTTP 请求，并对请求进行配置。

常见功能：

请求方法：get, post, put, delete, patch 等。
配置选项：headers, query, body 等。
响应处理：json, text, blob 等。

示例：使用基本功能

import wretch from 'wretch';

wretch('https://api.example.com/data')
  .get() // 发起 GET 请求
  .headers({ 'Authorization': 'Bearer your-token' }) // 设置请求头
  .query({ key: 'value' }) // 添加查询参数
  .json() // 解析 JSON 数据
  .then(data => console.log(data))
  .catch(error => console.error('Request failed:', error));