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


Posted in Javascript onSeptember 01, 2020

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

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

前端如何优雅的调用呢?

入门版

根据文档,用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 地址,例如http://192.168.86.8:8051/swagger-ui.html
  • 可选生成js 或者 typescript
  • 可以自定义生成的api class名称、api文件名
  • API 支持泛型

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

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:

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 || 'http://localhost:8080'
 }
}

使用

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

Vue中最佳实践

main.ts 全局定义

import { API } from './http/api/manageApi'

Vue.prototype.$manageApi = new API('/api/')

增加.d.ts

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

import { API } from '@/http/api/manageApi'
import { MarkAPI } from '@/http/api/mark-center-api'
declare module "vue/types/vue" {
 interface Vue {
 $manageApi: API
 $markApi: MarkAPI
 }
}

实际使用

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

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

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

开源地址

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

总结

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

Javascript 相关文章推荐
关于scrollLeft,scrollTop的浏览器兼容性测试
Mar 19 Javascript
javascript跨域的4种方法和原理详解
Apr 08 Javascript
javascript和jquery实现设置和移除文本框默认值效果代码
Jan 13 Javascript
JavaScript中神奇的call()方法
Mar 12 Javascript
自定义百度分享的分享按钮
Mar 18 Javascript
JS图片左右无缝隙滚动的实现(兼容IE,Firefox 遵循W3C标准)
Sep 23 Javascript
JS随机排序数组实现方法分析
Oct 11 Javascript
使用ng-packagr打包Angular的方法示例
Sep 21 Javascript
从源码里了解vue中的nextTick的使用
Nov 22 Javascript
了解JavaScript中的选择器
May 24 Javascript
jquery实现简易验证插件封装
Sep 13 jQuery
AudioContext 实现音频可视化(web技术分享)
Feb 24 Javascript
vue路由切换时取消之前的所有请求操作
Sep 01 #Javascript
jQuery实现动态加载瀑布流
Sep 01 #jQuery
vue Treeselect下拉树只能选择第N级元素实现代码
Aug 31 #Javascript
vue treeselect获取当前选中项的label实例
Aug 31 #Javascript
vue 监听 Treeselect 选择项的改变操作
Aug 31 #Javascript
搭建vscode+vue环境的详细教程
Aug 31 #Javascript
vue组件中实现嵌套子组件案例
Aug 31 #Javascript
You might like
php post大量数据时发现数据丢失问题解决方法
2015/06/20 PHP
16个最流行的JavaScript框架[推荐]
2011/05/29 Javascript
JavaScript之IE的fireEvent方法详细解析
2013/11/20 Javascript
使用jQuery和PHP实现类似360功能开关效果
2014/02/12 Javascript
jQuery学习总结之jQuery事件
2014/06/30 Javascript
extjs 如何给column 加上提示
2014/07/29 Javascript
JS动态插入并立即执行回调函数的方法
2016/04/21 Javascript
JS简单封装的图片无缝滚动效果示例【测试可用】
2017/03/22 Javascript
Vue header组件开发详解
2018/01/26 Javascript
小程序实现选择题选择效果
2018/11/04 Javascript
写一个Vue Popup组件
2019/02/25 Javascript
浅谈vue加载优化策略
2019/03/19 Javascript
VueCli3.0中集成MockApi的方法示例
2019/07/05 Javascript
微信小程序全局变量GLOBALDATA的定义和调用过程解析
2019/09/23 Javascript
jQuery实现轮播图效果demo
2020/01/11 jQuery
小谈angular ng deploy的实现
2020/04/07 Javascript
简单了解Python中的几种函数
2017/11/03 Python
Python通过命令开启http.server服务器的方法
2017/11/04 Python
深入浅析python with语句简介
2018/04/11 Python
Python-ElasticSearch搜索查询的讲解
2019/02/25 Python
Python3实现的简单三级菜单功能示例
2019/03/12 Python
对django 模型 unique together的示例讲解
2019/08/06 Python
numpy:np.newaxis 实现将行向量转换成列向量
2019/11/30 Python
python如何通过pyqt5实现进度条
2020/01/20 Python
python中turtle库的简单使用教程
2020/11/11 Python
matplotlib相关系统目录获取方式小结
2021/02/03 Python
HTML5如何使用SVG的方法示例
2019/01/11 HTML / CSS
国家地理在线商店:Shop National Geographic
2018/06/30 全球购物
体验完美剃须:The Art of Shaving
2018/08/06 全球购物
澳大利亚著名的纺织品品牌:Canningvale
2020/05/05 全球购物
区域总监的岗位职责
2013/11/21 职场文书
教师党员承诺书
2014/03/25 职场文书
一个都不能少观后感
2015/06/04 职场文书
国富论读书笔记
2015/06/26 职场文书
葬礼主持词
2015/07/02 职场文书
教师实习自我鉴定总结
2019/08/20 职场文书