服务器之家:专注于服务器技术及软件下载分享
分类导航

node.js|vue.js|jquery|angularjs|React|json|js教程|

服务器之家 - 编程语言 - JavaScript - Vue 使用typescript如何优雅的调用swagger API

Vue 使用typescript如何优雅的调用swagger API

2021-09-06 17:50JadePeng JavaScript

这篇文章主要介绍了Vue 使用typescript如何优雅的调用swagger API,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

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

Vue 使用typescript如何优雅的调用swagger API

前端如何优雅的调用呢?

入门版

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

  1. // 应用管理相关接口
  2. import axios from '../interceptors.js'
  3.  
  4. // 获取应用列表
  5. export const getList = (data) => {
  6. return axios({
  7. url: '/app/list?sort=createdDate,desc',
  8. method: 'get',
  9. params: data
  10. })
  11. }

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

进阶版本

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

问题: 还是需要手写

优雅版本

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

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

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

安装

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

  1. npm install -g generator-swagger-2-ts

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

  1. yo swagger-2-ts

按提示

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

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

  1. yo swagger-2-ts --swaggerUrl=http://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:

  1. export type AccountUserInfo = {
  2. disableTime?: string
  3. isDisable?: number
  4. lastLoginIp?: string
  5. lastLoginPlace?: string
  6. lastLoginTime?: string
  7. openId?: string
  8. }
  9.  
  10. export type BasePayloadResponse = {
  11. data?: object
  12. desc?: string
  13. retcode?: string
  14.  
  15. }
  16.  
  17. /**
  18. * User Account Controller
  19. * @class UserAccountAPI
  20. */
  21. export class UserAccountAPI {
  22. /**
  23. * changeUserState
  24. * @method
  25. * @name UserAccountAPI#changeUserState
  26.  
  27. * @param accountUserInfo - accountUserInfo
  28.  
  29. * @param $domain API域名,没有指定则使用构造函数指定的
  30. */
  31. changeUserState(parameters: {
  32. 'accountUserInfo': AccountUserInfo,
  33. $queryParameters?: any,
  34. $domain?: string
  35. }): Promise<AxiosResponse<BasePayloadResponse>> {
  36.  
  37. let config: AxiosRequestConfig = {
  38. baseURL: parameters.$domain || this.$defaultDomain,
  39. url: '/userAccount/changeUserState',
  40. method: 'PUT'
  41. }
  42.  
  43. config.headers = {}
  44. config.params = {}
  45.  
  46. config.headers[ 'Accept' ] = '*/*'
  47. config.headers[ 'Content-Type' ] = 'application/json'
  48.  
  49. config.data = parameters.accountUserInfo
  50. return axios.request(config)
  51. }
  52.  
  53. _UserAccountAPI: UserAccountAPI = null;
  54.  
  55. /**
  56. * 获取 User Account Controller API
  57. * return @class UserAccountAPI
  58. */
  59. getUserAccountAPI(): UserAccountAPI {
  60. if (!this._UserAccountAPI) {
  61. this._UserAccountAPI = new UserAccountAPI(this.$defaultDomain)
  62. }
  63. return this._UserAccountAPI
  64. }
  65. }
  66.  
  67. /**
  68. * 管理系统接口描述
  69. * @class API
  70. */
  71. export class API {
  72. /**
  73. * API构造函数
  74. * @param domain API域名
  75. */
  76. constructor(domain?: string) {
  77. this.$defaultDomain = domain || 'http://localhost:8080'
  78. }
  79. }

使用

  1. import { API } from './http/api/manageApi'
  2. // in main.ts
  3. let api = new API("/api/")
  4. api.getUserAccountAPI().changeUserState({
  5. isDisable: 1
  6. openId: 'open id'
  7. })

Vue中最佳实践

main.ts 全局定义

  1. import { API } from './http/api/manageApi'
  2.  
  3. Vue.prototype.$manageApi = new API('/api/')

增加.d.ts

增加types文件,方便使用智能提示

  1. import { API } from '@/http/api/manageApi'
  2. import { MarkAPI } from '@/http/api/mark-center-api'
  3. declare module "vue/types/vue" {
  4. interface Vue {
  5. $manageApi: API
  6. $markApi: MarkAPI
  7. }
  8. }

实际使用

现在可以在vue里直接调用了。

Vue 使用typescript如何优雅的调用swagger API

  1. this.$manageApi
  2. .getUserAccountAPI().changeUserState({isDisable: 1 openId: 'open id'})

开源地址

https://github.com/jadepeng/generator-swagger-2-ts

总结

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

原文链接:https://www.cnblogs.com/xiaoqi/p/generator-swagger-2-ts-2.html

延伸 · 阅读

精彩推荐