@zero-bits/request

Zero-Bits 专属的统一网络请求库，基于 axios 进行了二次封装，提供更便捷的接口调用、统一的拦截器配置以及无感 Token 刷新等功能。

安装

pnpm add @zero-bits/request axios

注：该库依赖 axios，请确保项目中已安装 axios。

初始化配置

通常在项目的入口或统一的 request 配置文件中（如 src/request/index.ts）进行实例化和配置：

import { createRequest } from '@zero-bits/request';
import { message } from 'antd'; // 根据你的 UI 库而定

const request = createRequest({
  // 基础 URL
  baseURL: 'https://api.example.com',
  // 超时时间
  timeout: 10000,
  
  // 获取当前的 Token
  getAccessToken: () => localStorage.getItem('access_token') || '',
  
  // 自定义注入 Token 的方式
  setAuthorization: (headers, token) => {
    headers.Authorization = `Bearer ${token}`;
  },
  
  // 业务侧接口请求成功判定条件（默认判定 res.code === 0）
  isSuccess: (res) => res.code === 0,
  
  // 业务层面的错误处理 (如 code !== 0 的情况)
  onBizError: (res) => {
    message.error(res.msg || '操作失败');
  },
  
  // HTTP 层面的错误处理 (如 403 / 500 等情况)
  onHttpError: ({ status }) => { 
    if (status === 403) {
       // 例如：history.push('/403') 
    }
  },

  // (可选) 配置自动无感刷新 Token
  // 如果不配置，则不会启用自动刷新机制
  refreshToken: {
    getRefreshConfig: () => ({ url: '/api-uaa/oauth/token' }),
    resolveAccessToken: (data) => data.access_token,
    onRefreshed: (data) => {
      localStorage.setItem('access_token', data.access_token);
    },
    onRefreshFailed: () => {
      // 刷新失败时处理登出逻辑
      localStorage.removeItem('access_token');
      window.location.href = '/login';
    }
  }
});

export default request;

基础使用

import request from '@/request'; // 引入上面你导出的实例化 request

// 发起 GET 请求
request.get('/users/list', { page: 1, limit: 10 }).then(res => {
  console.log(res.data);
});

// 发起 POST 请求
request.post('/users/add', { name: 'John Doe', age: 25 }).then(res => {
  if (res.code === 0) {
    console.log('添加成功');
  }
});

// 发起 PUT 请求
request.put('/users/update/1', { name: 'Jane Doe' });

// 发起 DELETE 请求
request.delete('/users/delete/1');

// 获取原始的 axios Response
request.raw('/users/info').then(res => {
  console.log(res.headers);
  console.log(res.data);
});

进阶功能

1. 手动取消单个请求

每次调用方法都会返回一个 CancelableRequest，你可以调用 .cancel() 随时中止请求：

const req = request.get('/very-slow-api');

// 在适当的时机（比如用户关闭了弹窗）取消请求
req.cancel();

2. 批量取消所有请求

在 SPA 应用路由切换时，我们通常会取消所有 pending 状态的请求以节约资源。

// 路由守卫中调用
request.cancelAll();

3. 跳过全局拦截逻辑

在个别特殊的请求下，你可能希望自己处理错误提示，或者这个接口本身就不需要传递 Token：

request.post('/special-api', data, {
  skipAuth: true,      // 不携带 Authorization 头
  skipBizError: true   // 请求失败（code !== 0）时不触发 onBizError 统一错误提示
}).then(res => {
  // 自己手动处理
});

4. 动态更新全局配置

在某些场景（如切换租户、更改 baseURL 等）下，可以在运行时动态更新 Axios 配置：

import { updateRequestConfig } from '@zero-bits/request';

updateRequestConfig({
  baseURL: 'https://new-api.example.com',
  headers: {
    'X-Tenant-Id': 'tenant_123'
  }
});