如何在React项目中使用openapi-generator生成的OpenAPI客户端

1. 实例化API客户端 #

生成的代码目录中会包含configuration.ts配置文件、以及按Swagger标签分类的API类文件（未做标签分类时默认生成DefaultApi），实例化逻辑如下：

// 从生成的代码目录导入对应依赖
import { Configuration, DefaultApi, UserApi } from 'src/components/api'

// 初始化全局配置
const baseConfig = new Configuration({
  basePath: 'https://你的后端服务域名', // 可覆盖Swagger中预设的接口基础路径
})

// 实例化需要用到的API类
export const defaultApi = new DefaultApi(baseConfig)
export const userApi = new UserApi(baseConfig)

2. 配置请求Access Token #

有两种常用的token配置方式，可根据业务场景选择：

• 静态token配置：适合token不会动态变更的场景，直接在初始化配置时传入

const baseConfig = new Configuration({
  basePath: 'https://你的后端服务域名',
  accessToken: '你的固定access_token值',
})

• 动态token配置：适合token存在本地存储、会随登录状态更新的场景，通过API实例内置的axios拦截器注入

import { Configuration, DefaultApi } from 'src/components/api'

const baseConfig = new Configuration({
  basePath: 'https://你的后端服务域名',
})
export const defaultApi = new DefaultApi(baseConfig)

// 给axios实例添加请求拦截器，动态注入token
defaultApi.instance.interceptors.request.use((request) => {
  const token = localStorage.getItem('access_token')
  if (token) {
    request.headers.Authorization = `Bearer ${token}`
  }
  return request
})

所有实例化后的API类都有instance属性，对应原生axios实例，可直接按axios的原生规则配置拦截器、超时时间等参数。

3. 查询接口对应的调用方法名 #

两种方式可以快速匹配接口和调用方法：

• 直接查看生成的API类文件：方法命名规则为[请求方式][接口路径驼峰化]，例如GET /api/user/info会生成getApiUserInfo()方法，每个方法上方会标注对应原始接口路径、参数说明
• 借助TS类型提示：在IDE中输入实例化后的API对象加.，会自动弹出所有可用方法列表，鼠标悬停即可查看该方法的入参、返回值完整类型定义

接口调用示例 #

// 调用获取用户信息接口
async function getUserInfo() {
  try {
    // 入参会自动做TS类型校验，无需额外手写类型定义
    const response = await userApi.getApiUserInfo({ userId: 123 })
    console.log('接口返回数据：', response.data)
  } catch (error) {
    console.error('请求失败：', error)
  }
}

内容的提问来源于stack exchange，提问作者Dawesign