如何用TypeScript在Vue项目中优雅地调用Swagger API实现高效接口调用？

本文共计767个文字，预计阅读时间需要4分钟。

Swagger 是一个规范和框架，用于生成、描述、调用和可视化 RESTful 风格的 Web 服务。集成 Swagger 后，后端服务可提供在线文档地址，方便前端同学学习。前端如何优雅地调用呢？

Swagger 是一个规范和完整的框架，用于生成、描述、调用和可视化 RESTful 风格的 Web 服务，后端集成下Swagger，然后就可以提供一个在线文档地址给前端同学。

前端如何优雅的调用呢？

入门版

根据文档，用axios自动来调用

// 应用管理相关接口 import axios from '../interceptors.js' // 获取应用列表 export const getList = (data) => { return axios({ url: '/app/list?sort=createdDate,desc', method: 'get', params: data }) }

这里的问题是，有多少个接口，你就要编写多少个函数，且数据结构需要查看文档获取。

进阶版本

使用typescript，编写API，通过Type定义数据结构，进行约束。

问题： 还是需要手写

优雅版本

swagger 其实是一个json-schema描述文档，我们可以基于此，自动生成。

很早之前，写过一个插件 generator-swagger-2-t, 简单的实现了将swagger生成typescript api。

今天，笔者对这个做了升级，方便支持后端返回的泛型数据结构。

安装

需要同时安装 Yeoman 和 -swagger-2-ts

npm install -g generator-swagger-2-ts

然后cd到你的工作目录，执行:

yo swagger-2-ts

按提示

• 输入swagger-ui 地址，例如192.168.86.8:8051/swagger-ui.html
• 可选生成js 或者 typescript
• 可以自定义生成的api class名称、api文件名
• API 支持泛型

也可以通过命令行直接传递参数

yo swagger-2-ts --swaggerUrl=localhost:8080/swagger-ui.html --className=API --type=typescript --outputFile=api.ts

• swaggerUrl: swagger ui url swaggerui地址
• className： API class name 类名
• type： typescript or javascipt
• outputFile: api 文件保存路径

生成代码demo：

export type AccountUserInfo = { disableTime?: string isDisable?: number lastLoginIp?: string lastLoginPlace?: string lastLoginTime?: string openId?: string } export type BasePayloadResponse = { data?: object desc?: string retcode?: string } /** * User Account Controller * @class UserAccountAPI */ export class UserAccountAPI { /** * changeUserState * @method * @name UserAccountAPI#changeUserState * @param accountUserInfo - accountUserInfo * @param $domain API域名,没有指定则使用构造函数指定的 */ changeUserState(parameters: { 'accountUserInfo': AccountUserInfo, $queryParameters?: any, $domain?: string }): Promise<AxiosResponse<BasePayloadResponse>> { let config: AxiosRequestConfig = { baseURL: parameters.$domain || this.$defaultDomain, url: '/userAccount/changeUserState', method: 'PUT' } config.headers = {} config.params = {} config.headers[ 'Accept' ] = '*/*' config.headers[ 'Content-Type' ] = 'application/json' config.data = parameters.accountUserInfo return axios.request(config) } _UserAccountAPI: UserAccountAPI = null; /** * 获取 User Account Controller API * return @class UserAccountAPI */ getUserAccountAPI(): UserAccountAPI { if (!this._UserAccountAPI) { this._UserAccountAPI = new UserAccountAPI(this.$defaultDomain) } return this._UserAccountAPI } } /** * 管理系统接口描述 * @class API */ export class API { /** * API构造函数 * @param domain API域名 */ constructor(domain?: string) { this.$defaultDomain = domain || 'localhost:8080' } }

使用

import { API } from './github.com/jadepeng/generator-swagger-2-ts

总结

到此这篇关于Vue 使用typescript如何优雅的调用swagger API的文章就介绍到这了,更多相关Vue 使用typescript内容请搜索易盾网络以前的文章或继续浏览下面的相关文章希望大家以后多多支持易盾网络！