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 相关文章推荐
js操作CheckBoxList实现全选/反选(在客服端完成)
Feb 02 Javascript
Javascript中Event属性搜集整理
Sep 17 Javascript
父元素与子iframe相互获取变量和元素对象的具体实现
Oct 15 Javascript
Node.js编码规范
Jul 14 Javascript
JavaScript的jQuery库中function的存在和参数问题
Aug 13 Javascript
值得分享的JavaScript实现图片轮播组件
Nov 21 Javascript
十大热门的JavaScript框架和库
Mar 21 Javascript
React Native实现进度条弹框的示例代码
Jul 17 Javascript
使用JS实现图片轮播的实例(前后首尾相接)
Sep 21 Javascript
微信小程序实现拨打电话功能的示例代码
Jun 28 Javascript
完美解决vue 中多个echarts图表自适应的问题
Jul 19 Javascript
JavaScript高级程序设计之基本引用类型
Nov 17 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 aes (ecb)解密后乱码问题
2015/06/22 PHP
详解PHP的Yii框架中组件行为的属性注入和方法注入
2016/03/18 PHP
PHP实现电商订单自动确认收货redis队列
2017/05/17 PHP
js传值 判断
2006/10/26 Javascript
javascript最常用与实用的创建类的代码
2010/08/12 Javascript
通过jQuery源码学习javascript(二)
2012/12/27 Javascript
JS 获取滚动条高度示例代码
2013/10/24 Javascript
javascript框架设计读书笔记之字符串的扩展和修复
2014/12/02 Javascript
如何改进javascript代码的性能
2015/04/02 Javascript
JS实现窗口加载时模拟鼠标移动的方法
2015/06/03 Javascript
angularjs学习笔记之三大模块(modal,controller,view)
2015/09/26 Javascript
jquery插件pagination实现无刷新ajax分页
2015/09/30 Javascript
超详细的javascript数组方法汇总
2015/11/21 Javascript
Web打印解决方案之普通报表打印功能
2016/08/29 Javascript
使用AngularJS 跨站请求如何解决jsonp请求问题
2017/01/16 Javascript
Vue实例简单方法介绍
2017/01/20 Javascript
js实现碰撞检测
2021/01/29 Javascript
python中使用urllib2伪造HTTP报头的2个方法
2014/07/07 Python
virtualenv实现多个版本Python共存
2017/08/21 Python
Python实现通讯录功能
2018/02/22 Python
Python实现的文本对比报告生成工具示例
2018/05/22 Python
关于css兼容性问题及一些常见问题汇总
2016/05/03 HTML / CSS
安纳塔拉酒店度假村及水疗官方网站:Anantara Hotel
2016/08/25 全球购物
思想汇报范文
2013/11/04 职场文书
学校卫生检查制度
2014/02/03 职场文书
毕业生如何写自我鉴定
2014/03/15 职场文书
设计专业毕业生求职信
2014/06/25 职场文书
乡镇食品安全责任书
2014/07/28 职场文书
2014最新版群众路线四风整改措施
2014/09/24 职场文书
2014年小学英语教师工作总
2014/12/03 职场文书
工程技术负责人岗位职责
2015/04/13 职场文书
公安机关起诉意见书
2015/05/20 职场文书
请学会珍惜眼前,因为人生没有下辈子!
2019/11/12 职场文书
Idea连接MySQL数据库出现中文乱码的问题
2021/04/14 MySQL
PL350与SW11的比较
2021/04/22 无线电
关于JavaScript 中 if包含逗号表达式
2021/11/27 Javascript