使用案例(需结合 raaper API接口平台使用)

• 安装: pnpm add @swiftcrab/rap @tanstack/react-query
• 更新接口: 执行脚本 pnpm rap

创建 overFetch.ts

import { message } from '@swiftcrab/crab'
import {
  RequestClient,
  formatToken,
  defaultResponseInterceptor,
  authenticateResponseInterceptor,
  errorMessageResponseInterceptor,
} from '@/modules/index'

/** 前罪为 '/api' 会被 vite 替换成 '', 所以如果接口有公共的路径可以写成 '/api/common' */
const baseURL = '/api'

function createRequestClient(baseURL: string) {
  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,
    }),
  )

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

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

  return client
}

export const requestClient = createRequestClient(baseURL)

/** 全局挂载 */
window.requestClient = requestClient

在 main.tsx 中引入

  import React from 'react'
  import ReactDOM from 'react-dom/client'
  /** 引入 QueryClient, QueryClientProvider 由 @tanstack/react-query 提供 */
  import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
  /** 引入 overFetch */
  import '@/request/overFetch'

  const queryClient = new QueryClient()

  ReactDOM.createRoot(document.querySelector('#root') as Container).render(
    <BrowserRouter>
      <QueryClientProvider client={queryClient}>
        <Layout />
      </QueryClientProvider>
    </BrowserRouter>,
  )

使用

import { type Models, useAPI, fetch } from '@/modules'

interface IExtraOption {
  /** 是否发送请求 */
  enabled?: boolean | ((req?: Partial<Models[T]['Req']>) => boolean)
  /** 数据缓存的时间, 默认5分钟, 单位毫秒 */
  gcTime?: number
  /** 控制请求失败后的重试次数。设置为 false 将禁用重试，设置为 0 会立即失败 */
  retry?: number | boolean
  /** 数据在这段时间内不会重新请求, 默认0, 单位毫秒 */
  staleTime?: number
  /** 当页面重新获得焦点时，是否重新获取数据, 默认 true */
  refetchOnWindowFocus?: boolean
  /** 当网络从断开恢复，是否自动重新获取 stale 数据，默认 true */
  refetchOnReconnect?: boolean
  /** axios配置 */
  axiosOption?: AxiosRequestConfig
  /** 处理返回的数据 */
  select?: (res?: any) => any
}
type TRow = Models['GET/api/dictionary/getDictionaryList']['Res']['data']['list']

const [data, { request, isLoading, errorMessage }] = useAPI['GET/api/dictionary/getDictionaryList']({ id: count }, {} as IExtraOption)

const data = await fetch['GET/api/dictionary/getDictionaryList']({ id: count }, {} as IExtraOption)