@moneko/request v1.6.1

@moneko/request

@moneko/request 是一个网络请求库，提供了拦截器、自定义请求前缀、取消请求等功能，适用于浏览器和 NodeJS 的 HTTP 请求管理。

📌 安装

使用 npm 或 yarn 进行安装：

npm install @moneko/request
# 或
yarn add @moneko/request

🚀 快速使用

设置全局请求前缀和响应拦截器

你可以使用 extend 方法来扩展全局配置，例如添加 请求前缀 和 拦截器。

// @/services/index.ts
import { extend } from '@moneko/request';
export { request } from '@moneko/request';

extend({
  interceptor: {
    /** 响应拦截器，可在此处处理通用错误、数据转换等 */
    response: (resp) => resp,
  },
  /** 设置全局请求前缀 */
  prefix: '/api',
});

🔥 使用 request 发送请求

request 方法用于发送 HTTP 请求

示例代码

import { request } from '@/services';

/** 发送 GET 请求 */
request('/metrics');
// 实际请求：GET /api/metrics

/** 发送 GET 请求，附带 URL 参数 */
request('/metrics', { params: { id: 2 } });
// 实际请求：GET /api/metrics?id=2

/** 发送 POST 请求，包含 body 数据和 URL 参数 */
request('/metrics', { data: { name: 2 }, params: { id: 2 }, method: 'POST' });
// 实际请求：POST /api/metrics?id=2，body: data

/** 发送 POST 请求，使用自定义前缀 */
request('/metrics', { prefix: '/api2', data: { name: 2 }, method: 'POST' });
// 实际请求：POST /api2/metrics，body: data

⚙️ request 方法参数

request(url: string, options?: RequestOption): Promise<GenericResponse>

🛠 RequestOption 配置项

📦 使用 Gzip 压缩请求数据

可以通过在 headers 中标记 Content-Encoding: gzip 来自动启用对请求数据的压缩

import { request } from '@moneko/request';

/** 发送 POST 请求，使用自定义前缀 */
request('/metrics', {
  headers: {
    'content-encoding': 'gzip', // 将提交的数据以 Gzip 压缩
  },
  method: 'POST',
  data: {
    username: 'admin',
    password: '123AS',
  },
});

🛑 取消请求

可以使用 abortId 来标记请求，并在需要时取消它。

import { request, cancelRequest } from '@moneko/request';

request('/metrics', { abortId: 'unique-id' })
  .then((res) => console.log(res))
  .catch((err) => console.error(err));

// 取消该请求
cancelRequest('unique-id');

🎯 自定义拦截器

@moneko/request 提供了 interceptor 选项，允许你在请求或响应时进行自定义处理，例如 全局错误捕获、请求日志 等。

extend({
  interceptor: {
    /** 请求拦截器 */
    request: (options) => {
      console.log('请求发起:', options);
      return options;
    },
    /** 响应拦截器 */
    response: (resp) => {
      if (resp.code !== 200) {
        console.error('请求错误:', resp.message);
      }
      return resp;
    },
  },
});

📝 结语

@moneko/request 会根据需要自动选择合适的请求方案 XMLHttpRequest 或 fetch，支持拦截器、请求前缀、取消请求等功能，适用于日常 API 请求管理, 支持 IE