使用示例

安装: pnpm add @swiftcrab/request

创建 overFetch.ts

import {
  overFetch,
  RequestClient,
  formatToken,
  defaultResponseInterceptor,
  authenticateResponseInterceptor,
  errorMessageResponseInterceptor,
  ERequestType,
} from '@swiftcrab/request'

const baseURL = '/api'

function createRequestClient() {
  const client = new RequestClient({
    baseURL,
  })

  /** 处理重新认证, 常用于回到登录页 */
  async function doReAuthenticate() {}

  /** 处理刷新token */
  async function doRefreshToken() {
    return ''
  }

  // 请求头处理
  client.addRequestInterceptor({
    fulfilled: config => {
      return config
    },
  })

  // 返回数据格式 { data: any, info: { code: number, message: string, status: boolean } }
  client.addResponseInterceptor(
    defaultResponseInterceptor({
      /** 响应数据中代表访问结果的字段名 */
      codeField: 'code',
      /** 响应数据中装载实际数据的字段名，或者提供一个函数从响应数据中解析需要返回的数据 */
      dataField: 'data',
      /** 当codeField所指定的字段值与successCode相同时，代表接口访问成功。如果提供一个函数，则返回true代表接口访问成功 */
      successCode: 200,
      /** 响应结构错误信息, 状态码等信息字段, 默认 '' */
      responseField: 'info',
    }),
  )

  client.addResponseInterceptor(
    authenticateResponseInterceptor({
      client,
      doReAuthenticate,
      doRefreshToken,
      /** 是否启用刷新令牌 */
      enableRefreshToken: true,
    }),
  )

  client.addResponseInterceptor(
    errorMessageResponseInterceptor((msg: string, error) => {
      /** 处理错误消息 */
    }),
  )

  return client
}

/** react 中使用 */
overFetch(createRequestClient, ERequestType.React)

/** 基础请求，不会携带 token */
export const baseRequestClient = new RequestClient({ baseURL })

在 main.tsx 中引入

  import React from 'react'
  import ReactDOM from 'react-dom/client'
  import '@/request/overFetch'

  ReactDOM.createRoot(document.querySelector('#root') as Container).render(
    <BrowserRouter>
      <Layout />
    </BrowserRouter>,
  )

使用 @swiftcrab/request

interface IExtraOption {
  /** 是否发送请求, 默认 true */
  shouldAutoRequest?: boolean
  /** 自动请求/手动请求, 默认 auto */
  mode?: 'auto' | 'manual'
  /** 最大接口缓存个数, 默认 50 */
  maxCache?: number
  /** 是否需要开启缓存, 默认 false */
  noCache?: boolean
  /** 缓存接口的存活时间, 单位 ms, 默认 3min */
  cacheTTL?: number
  /** 相同请求是否取消之前请求，默认 false */
  cancelPreviousRequest? boolean
  /** axios 配置 */
  axiosOption?: AxiosRequestConfig
  /** 更新请求参数, 可用于请求 */
  timestamp?: number
}

import { useAPI, fetch } from '@swiftcrab/request'

/** useAPI请求, 常用初始化请求 */
const [data, { request, isLoading, errorMessage }] = useAPI(
  'GET/api/dictionary/getDictionaryList',
  params as Record<string, any>,
  option as IExtraOption,
)

// fetch请求, 常用手动请求
const data = await fetch('GET/api/dictionary/getDictionaryList', params as Record<string, any>, option as IExtraOption)