@bud-fe/request

百威前端网络请求库

• API docs
• GitHub

✨ 特性

• 提供了对基于 axios 、Taro 的配置封装、基础&重复请求的拦截器预设
• 支持针对 response 错误的自定义处理
• axios 封装了下载的功能

📦 安装

$ pnpm add @bud-fe/request

🔨 使用

axios

0. 确保已安装 axios

$ pnpm add axios@^1.2.1

1. 创建 request 实例

import AxiosRequest, { TAxiosExtConfig } from '@bud-fe/request/es/axios';
import { authHelper } from '@bud-fe/utils';
import { message } from 'antd';
import type { MessageType } from 'antd/lib/message';
import type { AxiosRequestConfig } from 'axios';

// axios 配置
const requestConfig: AxiosRequestConfig = {
  baseURL: 'https://one-crm-dev.ab-inbev.cn',
  // ...axios中的所有配置项
};

let messageHide: MessageType;

// 额外配置
const extConfig: TAxiosExtConfig = {
  // 可选，设置重复请求策略，值为：disabled | useCurrent | usePrevious，默认为 usePrevious
  // disabled: 不对重复请求做额外处理； useCurrent： 取消上一次未结束的而使用当前触发的；usePrevious： 取消当下触发的而使用上次未结束的
  // 如果某些接口需要改变 repeatMode, 也可以在具体的接口方法里传参重置
  repeatMode: 'usePrevious',
  // 可选。全局请求中的回调。可以在此处展示 loading UI
  onLoadingStatusChanged: (requestInfo) => {
    console.log('onLoading===', requestInfo);
    messageHide = message.loading('加载中...');
  },
  // 可选。token header key，可传string或者函数
  // NOTE: 与 authHelper 二选一
  tokenName: authHelper.getTokenName,
  // 可选。@bud-fe/utils 中的 authHelper
  // NOTE: 与 tokenName 二选一
  authHelper,
  // 可选。绕过重复请求拦截的 url
  bypassRepeatInterceptUrls: [],
  // 可选。所有请求的 response 回调
  responseAction: {
    default: (msg, detailInfo) => {
      // 处理默认错误的回调，可以在此处toast提示用户
      message.error(msg);
    },
    repeat: (msg) => {
      // 处理拦截重复请求的回调，可以在此处toast提示用户
      // note: 如果设置了 repeatMode 为 disabled || useCurrent 时，该设置不会生效
      message.error(msg);
    },
    complete: (detailInfo) => {
      // 请求完成后的回调，一般用于埋点
      console.log('complete===', detailInfo);
      messageHide?.();
    },
    401: (msg, detailInfo) => {
      // 处理code为 401 的回调，可以在此处做跳转处理
    },
    // ...其余非200业务code的回调
  },
};

const request = new AxiosRequest(requestConfig, extConfig);

添加拦截器（可选）

request.addInterceptor({
  request: {
    onConfig: (config) => {
      return config;
    },
    onError: (error) => {
      return Promise.reject(error);
    },
  },
  response: {
    onConfig: (response) => {
      return response;
    },
    onError: (error) => {
      return Promise.reject(error);
    },
  },
});

2. 调用 request 实例的函数

request
  .post<IUserInfo>('/user/console/login', { username: 'admin', password: '123456' })
  .then((res) => {
    console.log('res.code', res.code);
    console.log('res.data', res.data);
    console.log('res.message', res.message);
  })
  .catch((e) => console.log(e));

// 单个请求设置重复策略覆盖初始设置：
request.post<IUserInfo>('/user/console/login', { username: 'admin', password: '123456' }, null, {
  repeatMode: 'useCurrent',
});

// request.get 用法同上
// request.download 用法同上

Taro

0. 确保已安装 @tarojs/taro

$ pnpm add @tarojs/taro

1. 创建 request 实例

import TaroRequest from '@bud-fe/request/es/taro';
import { getBaseUrl } from '@/configs';
import type { ITaroExtConfig, TGlobalOptionType } from '@bud-fe/request/es/taro';
import Taro from '@tarojs/taro';

// token header key
const HEADER_KEY_TOKEN = 'Authorization';

const COMMON_HEADER = {
  // ...定义全局 header
};

// 全局的请求配置，包括 baseURL（可传函数）、全局 header
const globalOption: TGlobalOptionType = {
  baseURL: getBaseUrl,
  header: COMMON_HEADER,
};

// 额外配置
const globalExtConfig: ITaroExtConfig = {
  // 必传。token header key，可传 string 或函数
  tokenName: HEADER_KEY_TOKEN,
  // 可选。绕过重复请求拦截的 url
  bypassRepeatInterceptUrls: [],
  // 可选。所有请求的 response 回调
  responseAction: {
    // 默认错误的回调，可以在此处 toast 提示用户
    default: (msg, detailInfo) => {
      Taro.showToast({ title: `默认错误-${msg}`, icon: 'none' });
    },
    // 拦截重复请求的回调，可以在此处 toast 提示用户
    repeat: (msg, detailInfo) => {
      Taro.showToast({ title: `重复拦截错误-${msg}`, icon: 'none' });
      console.log('repeat===', detailInfo);
    },
    complete: (detailInfo) => {
      // 请求完成后的回调，一般用于埋点
      console.log('complete===', detailInfo);
    },
    // code 为 401 的回调，可以在此处做跳转处理
    401: (msg) => {
      Taro.reLaunch({ url: `/pages/login/index?msg=${msg}` });
    },
  },
  // 当需要自定义全局loading UI时传入。
  // 已解决IPhone上toast和loading共用一个实例的问题
  // 已做去重
  onLoadingStatusChanged: (show) => {
    if (show) {
      Taro.showLoading({ title: '加载中...' });
    } else {
      Taro.hideLoading();
    }
  },
  // 可选。小程序静默登录相关配置。TODO: 若不使用小程序静默登录，请删除
  silentLoginConfig: {
    /**
     * 不触发静默登录的接口url列表。建议相对路径
     */
    bypassUrls: [],
    /**
     * 触发静默登录的时机（无论哪种mode，接口请求401无权限时都会触发）
     * 'no-token' - 请求前判断storage中有无token，无则触发; 'no-auth' - 接口请求401无权限时触发
     * @default 'no-token'
     */
    triggerMode: 'no-token',
    /**
     * 执行业务登录接口逻辑的 Promise。需要返回一个token值，其余情况视为失败
     * @param loginResult Taro.login 返回的结果
     * @returns 业务登录接口返回的token值
     */
    loginPromise: async (loginResult) => {
      // TODO: 请求业务登录接口...
      // const res = await request.post('/login', { code: loginResult.code });
      return 'token123456';
    },
  },
};
const request = new TaroRequest(globalOption, globalExtConfig);

2. 调用 request 实例的函数

request
  .post<IGetIssueMainResp>(
    '/user/console/login',
    // 请求参数
    { username: 'admin', password: '123456' },
    // 可选。Taro.request 的 option
    { header: {} },
    // 可选。
    // showLoading - 此请求是否展示loading（默认true）
    // showError - 此请求是否回调出错（回调第一步配置的responseAction。默认true)
    // bypassRepeatIntercept - 此请求是否绕过重复请求拦截（默认false）
    { showLoading: true, showError: true, bypassRepeatIntercept: false },
  )
  .catch((e) => console.log(e));
// request.get 用法同上