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 相关文章推荐
关于javascript中this关键字(翻译+自我理解)
Oct 20 Javascript
javascript强大的日期函数代码分享
Sep 04 Javascript
js判断数据类型如判断是否为数组是否为字符串等等
Jan 15 Javascript
使用jQuery的attr方法来修改onclick值
Jul 07 Javascript
加载列表时jquery获取ul中第一个li的属性
Nov 02 Javascript
angularjs基础教程
Dec 25 Javascript
JQuery的ON()方法支持的所有事件罗列
Feb 28 Javascript
使用纯javascript实现放大镜效果
Mar 18 Javascript
使用jQuery中的wrap()函数操作HTML元素的教程
May 24 Javascript
用JS动态改变表单form里的action值属性的两种方法
May 25 Javascript
基于jQuery实现淡入淡出效果轮播图
Jul 31 Javascript
jquery插件uploadify多图上传功能实现代码
Aug 12 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获取本周,上周,本月,上月,本季度日期的代码
2009/08/05 PHP
PHP调用Twitter的RSS的实现代码
2010/03/10 PHP
PHP的autoload自动加载机制使用说明
2010/12/28 PHP
在php和MySql中计算时间差的方法
2011/04/22 PHP
关于php正则匹配汉字的方法介绍
2013/04/25 PHP
在JQuery dialog里的服务器控件 事件失效问题
2010/12/08 Javascript
JQuery一种取同级值的方式(比如你在GridView中)
2012/03/15 Javascript
Javascript实现返回上一页面并刷新的小例子
2013/12/11 Javascript
jquery删除ID为sNews的tr元素的内容
2014/04/10 Javascript
一个不错的仿携程自定义数据下拉选择select
2014/09/01 Javascript
JQuery仿小米手机抢购页面倒计时效果
2014/12/16 Javascript
JavaScript检查弹出窗口是否被阻拦的方法技巧
2015/03/13 Javascript
jquery实现鼠标滑过后动态图片提示效果实例
2015/08/10 Javascript
Bootstrap每天必学之按钮(一)
2015/11/24 Javascript
Javascript中的arguments对象
2016/06/20 Javascript
获取JS中网页各种高宽与位置的方法总结
2016/07/27 Javascript
Angular17之Angular自定义指令详解
2018/01/21 Javascript
Vue项目webpack打包部署到Tomcat刷新报404错误问题的解决方案
2018/05/15 Javascript
Vue 获取数组键名的方法
2018/06/21 Javascript
详解Vue3.0 前的 TypeScript 最佳入门实践
2019/06/18 Javascript
微信小程序实现点击按钮后修改颜色
2019/12/05 Javascript
使用JavaScript获取扫码枪扫描得到的条形码的思路代码详解
2020/06/10 Javascript
[02:29]大剑、皮鞭、女装,这届DOTA2勇士令状里都有
2020/07/17 DOTA
Python自定义类的数组排序实现代码
2016/08/28 Python
快速了解Python相对导入
2018/01/12 Python
详解用python生成随机数的几种方法
2019/08/04 Python
在 Pycharm 安装使用black的方法详解
2020/04/02 Python
Python 给下载文件显示进度条和下载时间的实现
2020/04/02 Python
Django框架安装及项目创建过程解析
2020/09/14 Python
HTML5网页音乐播放器的示例代码
2017/11/09 HTML / CSS
波兰化妆品和护肤品购物网站:eKobieca
2019/08/30 全球购物
在阿尔卑斯山或希腊度过快乐假期:Alpine Elements
2019/12/28 全球购物
开学季活动策划方案
2014/02/28 职场文书
部队个人年终总结
2015/03/02 职场文书
迎新生晚会主持词
2015/06/30 职场文书
暑期家教宣传单
2015/07/14 职场文书