-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
-描述了将 OpenAPI 规范声明文件转换为类型安全的基于 Axios 的函数 - 添加了对 zod 的支持用于接口出入参校验 - 增加了生成原 Schema 文件和中间处理的 Schema 文件的功能 - 提到了即将完成的接口 Mock 功能- 更新了示例代码和文件结构说明
- Loading branch information
Showing
1 changed file
with
70 additions
and
53 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -8,13 +8,14 @@ OpenAPI(2.0/3.0/3.1) Schema → Type-safe Axios | |
[](https://app.codacy.com/gh/FrontEndDev-org/openapi-axios/dashboard?utm_source=gh&utm_medium=referral&utm_content=&utm_campaign=Badge_coverage) | ||
[](https://npmjs.com/package/openapi-axios) | ||
|
||
将 OpenAPI 规范声明文件转换为类型声明和可执行函数(基于 Axios)。与其他同类工具相比,具有以下特点: | ||
将 OpenAPI 规范声明文件转换为类型安全的基于 Axios 的函数。 | ||
|
||
- 😆 同时支持 [openAPI](https://www.openapis.org/) 2.0、3.0、3.1 规范 | ||
- 😉 生成的每个 API 都是一个函数,用于在构建时轻松进行 tree shaking | ||
- 😎 与最流行的 HTTP 客户端 [axios](https://axios-http.com/) 进行适配 | ||
- 🤗 轻松与本地请求客户端集成,例如在本地项目中创建的 Axios 实例(通常我们在本地都是需要自定义一些拦截器什么的) | ||
- 😁 易于使用,易于学习,类型安全 | ||
- 😎 与最流行的 HTTP 客户端 [axios](https://axios-http.com/) 进行适配,可轻松与本地 Axios 实例集成 | ||
- 😉 生成的每个 API 都是一个类型安全的函数,用于在构建时轻松进行 tree shaking | ||
- 🤔 基于 [zod](https://zod.dev/) 支持了接口出入参的校验(可选) | ||
- 😋 支持生成原 Schema 文件以及中间处理的 Schema 文件(可选) | ||
- 🤗 支持接口 Mock(待完成) | ||
|
||
# 安装 | ||
|
||
|
@@ -38,104 +39,120 @@ const { defineConfig } = require('openapi-axios'); | |
* @ref https://github.com/FrontEndDev-org/openapi-axios | ||
*/ | ||
module.exports = defineConfig({ | ||
modules: { | ||
'.petStore3': 'https://petstore3.swagger.io/api/v3/openapi.json' | ||
documents: { | ||
petStore3: 'https://petstore3.swagger.io/api/v3/openapi.json' | ||
}, | ||
}); | ||
``` | ||
|
||
## 生成 API 文件 | ||
## 生成 OpenAPI 相关文件 | ||
```shell | ||
# 根据配置文件生成typescript文件 | ||
npx openapi-axios | ||
|
||
# 将会生成 src/apis/.petStore3.ts 文件 | ||
# 将会生成 src/apis/petStore3.ts 文件 | ||
# 将会生成 src/apis/petStore3.type.ts 文件 | ||
``` | ||
|
||
<details> | ||
<summary>【点击展开】生成的文件将导出为一个函数和一个操作,如下所示</summary> | ||
<summary>src/apis/petStore3.ts【点击展开】</summary> | ||
|
||
```ts | ||
/** | ||
* @title Swagger Petstore - OpenAPI 3.1 | ||
* @version 1.0.6 | ||
* @title Swagger Petstore - OpenAPI 3.0 | ||
* @version 1.0.19 | ||
* @contact <[email protected]> | ||
* @description This is a sample Pet Store Server based on the OpenAPI 3.1 specification. | ||
You can find out more about | ||
Swagger at [http://swagger.io](http://swagger.io). | ||
* @summary Pet Store 3.1 | ||
* @see {@link http://swagger.io Find out more about Swagger} | ||
* @description This is a sample Pet Store Server based on the OpenAPI 3.0 specification. You can find out more about | ||
* Swagger at [http://swagger.io](http://swagger.io). In the third iteration of the pet store, we've switched to the design first approach! | ||
* You can now help us improve the API whether it's by making changes to the definition itself or to the code. | ||
* That way, with time, we can improve the API in general, and expose some of the new features in OAS3. | ||
* | ||
* Some useful links: | ||
* - [The Pet Store repository](https://github.com/swagger-api/swagger-petstore) | ||
* - [The source API definition for the Pet Store](https://github.com/swagger-api/swagger-petstore/blob/master/src/main/resources/openapi.yaml) | ||
*/ | ||
|
||
import type { AxiosPromise, AxiosRequestConfig } from 'axios'; | ||
import type { AxiosRequestConfig, AxiosResponse } from 'axios'; | ||
import type * as Type from './pet-store.type.ts'; | ||
import axios from 'axios'; | ||
|
||
/** | ||
* @description Add a new pet to the store | ||
* @summary Add a new pet to the store | ||
* @see pet Everything about your Pets {@link http://swagger.io Find out more} | ||
* @param data Create a new pet in the store | ||
* @param [config] request config | ||
* @returns Successful operation | ||
*/ | ||
export async function addPet(data: Type.AddPetData, config?: AxiosRequestConfig): Promise<AxiosResponse<Type.AddPetResponse>> { | ||
return axios({ | ||
method: 'POST', | ||
url: `/pet`, | ||
data, | ||
...config | ||
}); | ||
} | ||
|
||
// ... 省略 ... | ||
``` | ||
</details> | ||
|
||
<details> | ||
<summary>src/apis/petStore3.type.ts【点击展开】</summary> | ||
|
||
```ts | ||
/** | ||
* @description Pet | ||
* @title Swagger Petstore - OpenAPI 3.0 | ||
* @version 1.0.19 | ||
* @contact <[email protected]> | ||
* @description This is a sample Pet Store Server based on the OpenAPI 3.0 specification. You can find out more about | ||
* Swagger at [http://swagger.io](http://swagger.io). In the third iteration of the pet store, we've switched to the design first approach! | ||
* You can now help us improve the API whether it's by making changes to the definition itself or to the code. | ||
* That way, with time, we can improve the API in general, and expose some of the new features in OAS3. | ||
* | ||
* Some useful links: | ||
* - [The Pet Store repository](https://github.com/swagger-api/swagger-petstore) | ||
* - [The source API definition for the Pet Store](https://github.com/swagger-api/swagger-petstore/blob/master/src/main/resources/openapi.yaml) | ||
*/ | ||
|
||
// ... 省略 ... | ||
|
||
export interface Pet { | ||
/** | ||
* @format int64 | ||
* @example 10 | ||
*/ | ||
id?: number; | ||
/** | ||
* @description Pet Category | ||
*/ | ||
category?: Category; | ||
/** | ||
* @example doggie | ||
*/ | ||
name: string; | ||
photoUrls: string; | ||
tags?: Tag; | ||
category?: Category; | ||
photoUrls: Array<string>; | ||
tags?: Array<Tag>; | ||
/** | ||
* @description pet status in the store | ||
*/ | ||
status?: 'available' | 'pending' | 'sold'; | ||
/** | ||
* @format int32 | ||
* @example 7 | ||
*/ | ||
availableInstances?: number; | ||
petDetailsId?: unknown; | ||
petDetails?: unknown; | ||
status?: ('available' | 'pending' | 'sold'); | ||
} | ||
|
||
// ... 省略 ... | ||
|
||
/** | ||
* @description Update an existing pet by Id | ||
* @summary Update an existing pet | ||
* @see pet Everything about your Pets {@link http://swagger.io Find out more} | ||
* @param data Pet object that needs to be updated in the store | ||
* @param [config] request config | ||
* @returns Successful operation | ||
*/ | ||
export async function updatePet(data: Pet, config?: AxiosRequestConfig): AxiosPromise<Pet> { | ||
return axios({ | ||
method: 'put', | ||
url: `/pet`, | ||
data, | ||
...config, | ||
}); | ||
} | ||
export type AddPetData = Pet; | ||
export type AddPetResponse = Pet; | ||
|
||
// ... 省略 ... | ||
``` | ||
</details> | ||
|
||
然后你可以直接导入一个函数并使用它。 调用接口就像调用本地函数一样简单。 | ||
然后你可以直接导入一个函数来使用它: | ||
|
||
```ts | ||
import { updatePet } from '@/apis/.petStore3'; | ||
import { addPet } from '@/apis/.petStore3'; | ||
|
||
// 类型安全 | ||
const { data: pet } = await updatePet({ | ||
const { data: pet } = await addPet({ | ||
name: 'MyCat', | ||
photoUrls: ['photo1', 'photo2'] | ||
}); | ||
|
||
// 类型安全 | ||
|