需在 rapper官网注册后再使用

全局安装: pnpm add @swiftcrab/rapper -g
安装: pnpm add @swiftcrab/request
登录: `rapper login`
更新接口: `rapper update 或 rapper up`
登出: `rapper logout`
查看版本: `rapper --version`

创建 overFetch.ts

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

overFetch(() => {
  const client = new RequestClient({
    baseURL: '/api',
  })

  /** 处理重新认证, 常用于回到登录页 */
  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
})

在 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>,
  )

在 package.json 配置

{
  "rapper": {
    "projectId": 1, // 仓库projectId
    "rapUrl": "", // rapper平台首页地址
    "apiUrl": "", // 后端接口基础地址
    "framework": "react" | "vue" // react 项目 | vue 项目
  },
}

使用

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

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
}

// 获得接口类型
type TRow = Models['GET/dictionary/getDictionaryList']['Res']['data']['list']

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

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