React掌握openapi-typescript-codegen快速生成API客户端代码的过程

 更新时间:2024年11月15日 10:36:42   作者:亦世凡华、  
openapi-typescript-codegen是一个开源工具,用于根据OpenAPI规范自动生成TypeScript代码,包括类型定义和API客户端代码,它帮助开发者节省手动编写代码的时间,提高开发效率,感兴趣的朋友一起看看吧

今天深入探索一个神奇的工具——openapi-typescript-codegen。它不仅能够帮助你快速生成TS代码,还能让你的API请求更加高效、类型安全,让开发者摆脱手动编写冗长请求代码的困扰,专注于实现业务逻辑。接下来让我们一起来了解它的强大功能和使用技巧,提升你的开发体验!

        openapi-typescript-codegen:根据OpenAPI规范自动生成TS代码的开源工具,OpenAPI 是一种广泛使用的API规范,能够描述RESTful API的结构和行为,包括请求、响应、数据模型等内容,而openapi-typescript-codegen这个工具正是利用OpenAPI规范,自动化地为开发者生成与之匹配的TS类型定义和API客户端代码,也就是说作为前端的你不再需要根据后端提供的接口编写接口函数,直接一键就可以生成接口函数,大大提高了编程效率!

如果想了解该开源工具的源码,可以随时访问 官网 进行查阅,这里不再赘述,接下来博主就对这个开源工具进行一个简单的介绍!

openapi-typescript-codegen的作用如下所示:

1)自动生成TS类型:通过读取OpenAPI规范文件,生成与之对应的TS类型定义,这样直接在代码中使用这些类型,而无需手动编写类型声明确保类型安全。

2)生成API客户端代码:生成用于与API交互的客户端代码,包括自动生成请求函数、错误处理、请求参数的类型化等。

3)简化与API的集成:帮助快速生成与API交互所需的所有代码,避免了手动构建请求、解析响应等繁琐的工作,提高了开发效率。

4)保持同步与API规范:通过直接从OpenAPI规范中生成代码,确保每次 API 更新时相关的客户端代码都能自动同步,避免了手动更新的繁琐和遗漏。

通过官方文档的介绍,我们可以知道我们使用该开源工具的优势所在:

总之其是一个非常有意义的工具,特别适用于需要与第三方或内部API进行频繁交互的TS项目,帮助开发者减少了手动编写重复代码的工作量,确保了代码的类型安全和可靠性,同时能够与API文档保持同步,减少了开发中的错误和不一致问题,具体想了解的请查阅官网,这里不再赘述:

借助该工具开发者不仅能提高开发效率,还能享受更加流畅和高效的工作体验,接下来博主就讲解一下如何对该开源工具使用进行讲解,不足之处还请见谅!

接下来介绍如何快速上手openapi-typescript-codegen,帮助开发者如何在项目中轻松生成与API交互所需的代码,提升开发效率并确保类型安全,在官方文档中提供了该工具使用的一些核心命令,如下所示:

$ openapi --help
  Usage: openapi [options]
  Options:
    -V, --version             output the version number
    -i, --input <value>       OpenAPI specification, can be a path, url or string content (required)
    -o, --output <value>      Output directory (required)
    -c, --client <value>      HTTP client to generate [fetch, xhr, node, axios, angular] (default: "fetch")
    --name <value>            Custom client class name
    --useOptions              Use options instead of arguments
    --useUnionTypes           Use union types instead of enums
    --exportCore <value>      Write core files to disk (default: true)
    --exportServices <value>  Write services to disk (default: true)
    --exportModels <value>    Write models to disk (default: true)
    --exportSchemas <value>   Write schemas to disk (default: false)
    --indent <value>          Indentation options [4, 2, tab] (default: "4")
    --postfixServices         Service name postfix (default: "Service")
    --postfixModels           Model name postfix
    --request <value>         Path to custom request file
    -h, --help                display help for command
  Examples
    $ openapi --input ./spec.json --output ./generated
    $ openapi --input ./spec.json --output ./generated --client xhr

从上面核心命令举出的examples我们可以知道,该工具主要使用的就是这两个常用命令,这里对其做一个简单的介绍:

例如:openapi --input ./spec.json --output ./generated --client xhr

1)–input:指定接口文档的路径、url 或字符串内容(必填)

2)–output:代码生成的目录

3)–client:生成的代码所需要使用的请求库 

作为前端开发者最常用的请求库无非就是axios,这里我们终端执行如下命令进行安装:

// 首先下载axios
npm install axios
// 然后安装成功API工具
npm install openapi-typescript-codegen --save-dev

生成命令:装配置之后我们可以直接在我们的demo项目中进行测试一下,项目终端执行如下命令可是发现控制台报错无法识别,如下所示:

openapi --input 你的在线swagger.json地址 --output ./src/api --client axios

解决该方法有两种,一直是直接将开源工具全局安装,另一种就是使用npx临时安装,都可以:

// 全局安装
npm install openapi-typescript-codegen -g
// 临时安装
npx openapi-typescript-codegen --input 你的在线swagger.json地址 --output ./src/api--client axios

如下可以看出我们根据在线的swagger.json直接生成的API接口代码:

为了方便后期重新生成最新的接口代码,我们可以将命令放置在package.json文件中,通过执行npm命令快速生成接口代码,如下所示:

目录介绍:接下来我们对上面生成的api目录下的文件代码进行一个简单的介绍:

1)core:包含接口请求类型限制、接口请求基本设置、封装的接口请求request函数

2)models:包含接口请求函数中的所有ts类型

3)services:包含所有的请求接口函数

4)index.ts:所有请求函数的出口

这里我们可以自定义一个request.ts文件,然后执行如下命令,在每次重新生成的api文件中,复制使用我们自定义的request.ts文件:

// axios基础封装
import axios from 'axios'
export const request: any = axios.create({
    baseURL: '服务器接口根地址',
    timeout: 5000,
})
// 请求拦截器
request.interceptors.request.use((config: any) => {
    // 请求拦截器
    return config
}, (error: any) => {
    return Promise.reject(error)
})
// 响应拦截器
request.interceptors.response.use((res: any) => {
    return res.data
},  (error: any) => {
        //处理网络错误
        let msg = ''
        const status = error.response.status
        switch (status) {
            case 401:
                msg = 'token过期'
                break
            case 403:
                msg = '无权访问'
                break
            case 404:
                msg = '请求地址错误'
                break
            case 500:
                msg = '服务器出现问题'
                break
            default:
                msg = '网络出现问题'
                break
        }
        return Promise.reject(error)
    }
)

要生成的代码中执行如下命令,该--request参数告诉生成器不要生成默认的request.ts文件,而是复制指定的自定义文件进行使用:

openapi --input swagger地址 --output ./src/api --request ./src/utils/request.ts --client axios

随便调用一个函数:

import { Button } from 'antd';
import { BasicDataService } from './api'
const App = () => {
  const getData = async () => {
    const data = await BasicDataService.basicDataQueryLocation()
    console.log(data)
  }
  getData()
  return (
    <div style={{ display: 'flex', gap: '20px' }}>
      <Button type='primary'>按钮</Button>
    </div>
  )
}
export default App

结果被打印了出来:

到此这篇关于React掌握openapi-typescript-codegen快速生成API客户端代码的文章就介绍到这了,更多相关react openapi-typescript-codegen API内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • react-native DatePicker日期选择组件的实现代码

    react-native DatePicker日期选择组件的实现代码

    本篇文章主要介绍了react-native DatePicker日期选择组件的实现代码,具有一定的参考价值,有兴趣的可以了解下
    2017-09-09
  • 浅谈React Router关于history的那些事

    浅谈React Router关于history的那些事

    这篇文章主要介绍了浅谈React Router关于history的那些事,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-04-04
  • js中自定义react数据验证组件实例详解

    js中自定义react数据验证组件实例详解

    我们在做前端表单提交时,经常会遇到要对表单中的数据进行校验的问题。这篇文章主要介绍了js中自定义react数据验证组件 ,需要的朋友可以参考下
    2018-10-10
  • React 中state与props更新深入解析

    React 中state与props更新深入解析

    这篇文章主要为大家介绍了React 中state与props更新深入解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-11-11
  • 在React中this容易遇到的问题详解

    在React中this容易遇到的问题详解

    这篇文章主要介绍了在React中this容易遇到的问题总结,文中有详细的示例代码,希望对大家有一定的帮助,需要的朋友可以参考下
    2023-05-05
  • JavaScript中React面向组件编程(上)

    JavaScript中React面向组件编程(上)

    本文主要介绍了React组件中默认封装了很多属性,有的是提供给开发者操作的,其中有三个属性非常重要:state、props、refs。感兴趣的小伙伴可以参考阅读
    2023-03-03
  • useState 解决文本框无法输入的问题详解

    useState 解决文本框无法输入的问题详解

    这篇文章主要为大家介绍了useState 解决文本框无法输入的问题详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • react最流行的生态替代antdpro搭建轻量级后台管理

    react最流行的生态替代antdpro搭建轻量级后台管理

    这篇文章主要为大家介绍了react最流行的生态替代antdpro搭建轻量级后台管理示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • create-react-app 修改为多入口编译的方法

    create-react-app 修改为多入口编译的方法

    这篇文章主要介绍了create-react-app 修改为多入口编译的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • React日期时间显示组件的封装方法

    React日期时间显示组件的封装方法

    这篇文章主要为大家详细介绍了React日期时间显示组件的封装方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-08-08

最新评论