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

文章目录

  • 用法
  • 自定义请求参数的方法
      • 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.mzph.cn/news/703009.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux运维- FTP服务器

FTP服务器的配置与管理 项目场景 学院教职工在日常工作中,经常需要传送一些文件和资料。可以使用移动存储设备转存再复制,或者通过共享文件的方式实现,但是两种方法都不是很简单、方便。相对于这两种方法,使用FTP传送文件和资料…

【电子通识】为什么单片机芯片上会有多组VDD电源?

在单片机芯片规格书中,我们经常能看到多个组VDD的设计,如下红框所示管脚都是VDD管脚。 为什么需要这样设计?只设置一个VDD管脚,把其他的VDD管脚让出来多做几个IO或是其他复用功能不好吗?接下来我们从单片机内部的电路结…

阿里云-系统盘-磁盘扩容

阿里云系统磁盘扩容 之前是测试环境磁盘用的默认的有 40G,后面升级到正式的 磁盘怕不够用打算升级到 100G, 系统镜像: Alibaba Cloud Linux 3.2104 LTS 64 位 磁盘 ESSD 40G 升级步骤: 扩容与创建快照 在阿里云后台首先去扩容…

域名系统与IP地址分配

域名 域名的概述 域名是一个逻辑的概念,它不反映主机的物理地点 域名结构 由于数字形式的IP地址难以记忆和理解,为此人们采用英文符号来表示IP地址,这就产生了域名,域名长度不超过255各字符,每一层域名长度不超过6…

旅游组团自驾游拼团系统 微信小程序python+java+node.js+php

随着社会的发展,旅游业已成为全球经济中发展势头最强劲和规模最大的产业之一。为方便驴友出行,寻找旅游伙伴,更好的规划旅游计划,开发一款自驾游拼团小程序,通过微信小程序发起自驾游拼团,吸收有车或无车驴…

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

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

Kotlin:协程基础

点击查看:协程基础 中文文档 点击查看:协程基础 英文文档 第一个协程程序 import kotlinx.coroutines.*fun main(){GlobalScope.launch {delay(1000L)//delay 是一个特殊的 挂起函数 ,它不会造成线程阻塞,但是会 挂起 协程&…

机器学习:SVM算法(Python)

一、核函数 kernel_func.py import numpy as npdef linear():"""线性核函数:return:"""def _linear(x_i, x_j):return np.dot(x_i, x_j)return _lineardef poly(degree3, coef01.0):"""多项式核函数:param degree: 阶次:param …

纯国产轻量化数字孪生:智慧城市、智慧工厂、智慧校园、智慧社区。。。

AMRT 3D数字孪生引擎介绍 AMRT3D引擎是一款融合了眸瑞科技的AMRT格式与轻量化处理技术为基础,以降本增效为目标,支持多端发布的一站式纯国产自研的CS架构项目开发引擎。 引擎包括场景搭建、UI拼搭、零代码交互事件、光影特效组件、GIS/BIM组件、实时数据…

五、数组——Java基础篇

六、数组 1、数组元素的遍历 1.1数组的遍历:将数组内的元素展现出来 1、普通for遍历:根据下表获取数组内的元素 2、增强for遍历: for(数据元素类型 变量名:数组名){ 变量名:数组内的每一个值…

【vue+leaflet】vue使用leaflet.pm保存绘制后的图层的点位信息、图层回显、平面图切换、地图事件函数、图层事件函数说明(二)

看效果展示: 【vueleaflet】第二节效果展示视频 1.平面图切换,多个平面图切换展示 <div class"select"><span>平面图&#xff1a;</span><el-select v-model"pic" placeholder"全部" clearable filterable change"ini…

机器学习.线性回归

斯塔1和2是权重项&#xff0c;斯塔0是偏置项&#xff0c;在训练过程中为了使得训练结果更加精确而做的微调&#xff0c;不是一个大范围的因素&#xff0c;核心影响因素是权重项 为了完成矩阵的运算&#xff0c;在斯塔0后面乘x0&#xff0c;使得满足矩阵的转换&#xff0c;所以在…

编码后的字符串lua

-- 长字符串 local long_string "你好你好你好你好你好你好你好你好" local encoded_string "" for i 1, #long_string do local char_code string.byte (long_string, i) encoded_string encoded_string .. char_code .. "," end encoded_…

redis数据结构源码分析——压缩列表ziplist(I)

前面讲了跳表的源码分析&#xff0c;本篇我们来聊一聊另外一个重点结构——压缩列表 文章目录 存储结构字节数组结构节点结构 压缩编码zipEntryzlEntry ZIP_DECODE_PREVLENZIP_DECODE_LENGTH API解析ziplistNew(创建压缩列表)ziplistInsert(插入)ziplistDelete(删除)ziplistFi…

复旦大学EMBA联合澎湃科技:共议科技迭代 创新破局

1月18日&#xff0c;由复旦大学管理学院、澎湃新闻、厦门市科学技术局联合主办&#xff0c;复旦大学EMBA项目、澎湃科技承办的“君子知道”复旦大学EMBA前沿论坛在厦门成功举办。此次论坛主题为“科技迭代 创新破局”&#xff0c;上海、厦门两地的政策研究专家、科学家、科创企…

2024年漳州本地有正规等保测评机构吗?在哪里?

我们大家都知道&#xff0c;企业办理等保一定要找有资质的等保测评机构。因此不少漳州企业在问&#xff0c;2024年漳州本地有正规等保测评机构吗&#xff1f;在哪里&#xff1f;这里我们小编通过查找来为大家解答一下&#xff0c;仅供参考&#xff01; 目前福建漳州本地没有正规…

HTTP---------状态码

当服务端返回 HTTP 响应时&#xff0c;会带有一个状态码&#xff0c;用于表示特定的请求结果。比如 HTTP/1.1 200 OK&#xff0c;里面的 HTTP/1.1 表示协议版本&#xff0c;200 则是状态码&#xff0c;OK 则是对状态码的描述。 由协议版本、状态码、描述信息组成的行被称为起始…

北京硒鼓耗材回收价位,硒鼓回收价格,回收

联系我的时候请说是在百猫网看到的&#xff01; 硒鼓回收价格&#xff1a;最专业的硒鼓回收 顺达耗材回收 俗话说&#xff0c;顾客是最好的&#xff0c;良好的品牌效应是推动发展的关键之一。 北京顺达耗材回收有限公司为中小企业创造良好的二手消费市场&#xff0c;不断贯彻…

皓学IT:MySQL02

一、了解表 1.1.概述 表是处理数据和建立关系型数据库及应用程序的基本单元&#xff0c;是构成数据库的基本元素之一&#xff0c;是数据库中数据组织并储存的单元&#xff0c;所有的数据都能以表格的形式组织&#xff0c;目的是可读性强。 1.2.表结构简述 一个表中包括行和列…

Uncertainty-Aware Mean Teacher(UA-MT)

Uncertainty-Aware Mean Teacher 0 FQA:1 UA-MT1.1 Introduction:1.2 semi-supervised segmentation1.3 Uncertainty-Aware Mean Teacher Framework 参考&#xff1a; 0 FQA: Q1: 不确定感知是什么意思&#xff1f;不确定信息是啥&#xff1f;Q2&#xff1a;这篇文章的精妙的点…