一键生成请求方法的工具 —— OpenAPI Typescript Codegen

news/2025/2/12 19:38:39/

文章目录

  • 用法
  • 自定义请求参数的方法
      • 1)使用代码生成器提供的全局参数修改对象
      • 2)直接定义 axios 请求库的全局参数,比如:全局请求响应拦截器
  • 报错解决

用法

首先下载axios

npm install axios

官网:https://github.com/ferdikoomen/openapi-typescript-codegen

首先安装:

npm install openapi-typescript-codegen --save-dev

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

–output:代码生成的目录

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

openapi --input ./spec.json --output ./generated --client xhr

image-20240225133608737
首先复制接口文档的路径

image-20240225133912618

完整路径:http://localhost:8121/api/v2/api-docs

实例代码

openapi --input http://localhost:8121/api//v2/api-docs --output ./generated --client axios

执行完成后,在项目根目录中会出现下图目录,可以看见,它直接给我们生成了向后端发请求的函数,当需要使用时,只需要直接调用就好了。
后端把代码写到哪个文件里,生成的请求方法也就会生成到哪个文件里。
在这里插入图片描述

如果接口文档发生了变化,只需要再次执行一次上述指令,就可以重新生成了,非常的方便!


自定义请求参数的方法

1)使用代码生成器提供的全局参数修改对象

https://github.com/ferdikoomen/openapi-typescript-codegen/wiki/OpenAPI-object

按如下图寻找

image-20240225160144294

image-20240225160309555

image-20240225160327610

这个配置对象在generated/core里。其中BASE可以修改请求地址

image-20240225160623676

2)直接定义 axios 请求库的全局参数,比如:全局请求响应拦截器

https://www.axios-http.cn/docs/interceptors

src/plugins/axios.ts

import axios from 'axios'// 添加请求拦截器
axios.interceptors.request.use(function (config) {// 在发送请求之前做些什么return config},function (error) {// 对请求错误做些什么return Promise.reject(error)}
)// 添加响应拦截器
axios.interceptors.response.use(function (response) {console.log('响应', responses)// 2xx 范围内的状态码都会触发该函数。// 对响应数据做点什么return response},function (error) {// 超出 2xx 范围的状态码都会触发该函数。// 对响应错误做点什么return Promise.reject(error)}
)

在main.ts中引入

import '@/plugins/axios'


报错解决

明明已经执行了安装命令,却还是报错

image-20240225143742140

解决办法

法1:执行以下命令

npx 是一个 Node.js 工具,用于执行安装在项目依赖中的可执行文件。它的作用是在不全局安装的情况下,临时运行项目依赖中的命令。

使用 npx 命令可以避免在全局安装可执行文件时可能出现的版本冲突问题,并且可以确保项目依赖的命令始终是最新版本。

npx openapi-typescript-codegen --input http://localhost:8121/api/v2/api-docs --output ./generated --client axios

法2:全局安装

npm install openapi-typescript-codegen -g

法3:将目录中的 node_modules/.bin 配置到环境变量中去


http://www.ppmy.cn/news/1362619.html

相关文章

qt程序中,如何做才能用到OpenGL ES图形api

要在Qt程序中使用OpenGL ES图形API,您可以通过以下几种方式实现: 使用QOpenGLWidget:QOpenGLWidget是Qt提供的一个用于OpenGL渲染的窗口部件。它简化了OpenGL上下文的创建和管理,使开发者可以专注于编写渲染代码。通过继承QOpenG…

2024 Sora来了!“手机Agent智能体”也来了!

近日,Open AI发布了能够根据文本生成超现实视频的工具Sora,多款震撼视频引爆科技圈刷屏,热度持续发酵占据AI领域话题中心,被认为是AGI实现过程里的重大里程碑事件。新一轮的人工智能浪潮给人类未来的生产和生活方式带来巨大而深远…

爬虫入门五(Scrapy架构流程介绍、Scrapy目录结构、Scrapy爬取和解析、Settings相关配置、持久化方案)

文章目录 一、Scrapy架构流程介绍二、Scrapy目录结构三、Scrapy爬取和解析Scrapy的一些命令css解析xpath解析 四、Settings相关配置提高爬取效率基础配置增加爬虫的爬取效率 五、持久化方案 一、Scrapy架构流程介绍 Scrapy一个开源和协作的框架,其最初是为了页面抓取…

代码随想录算法训练营第29天 |第七章 回溯算法part05

学习目标&#xff1a; 491.递增子序列 46.全排列 47.全排列 II 学习内容&#xff1a; 491.递增子序列 class Solution { public:vector<int> path;vector<vector<int>> result;void backtracking(vector<int>& nums, int startIndex){if(path.si…

Mkdocs-Wcowin博客主题

Mkdocs-Wcowin主题 通过主题和目录以打开文章基于Material for MkDocs美化 简洁美观&#xff0c;功能多元化简单易上手&#xff0c;小白配置 教程详细&#xff0c;清晰易懂 展示 感受一下它的简洁美观&#xff1a;Mkdocs-Wcowin主题 主页 文章页 博客页 标签页 简…

Java架构师之路五、微服务:微服务架构、服务注册与发现、服务治理、服务监控、容器化等。

目录 微服务架构&#xff1a; 服务注册与发现&#xff1a; 服务治理&#xff1a; 服务监控&#xff1a; 容器化&#xff1a; 上篇&#xff1a;Java架构师之路四、分布式系统&#xff1a;分布式架构、分布式数据存储、分布式事务、分布式锁、分布式缓存、分布式消息中间件、…

golang实现一个BasicAuth的HTTP server

之前写的《golang实现一个简单的HTTP server》没有包含认证部分 本例给出了支持BasicAuth的实现&#xff0c;以及如何在一个项目中导入自己定义的package 编写代码 创建项目所在文件夹 adminhpc-1:~/go$ mkdir auth_http adminhpc-1:~/go$ cd auth_http adminhpc-1:~/go/auth…

【selenium】执行 Javascript 脚本 滚动、元素的特殊操作等

某些特殊情况下&#xff0c;使用selenium的api无法操作页面元素&#xff0c;点击、滚动实现的某些功能&#xff0c;可以考虑通过执行js来完成。 为什么不用js写自动化&#xff1f;——selenium第一版是js写的&#xff0c;但js兼容性存在问题&#xff0c;所以引入webdriver 现在…