Vue 使用typescript如何优雅的调用swagger API
Swagger是一个规范和完整的框架，用于生成、描述、调用和可视化RESTful风格的Web服务，后端集成下Swagger，然后就可以提供一个在线文档地址给前端同学。
前端如何优雅的调用呢？
入门版
根据文档，用axios自动来调用
//应用管理相关接口
importaxiosfrom'../interceptors.js'
//获取应用列表
exportconstgetList=(data)=>{
returnaxios({
url:'/app/list?sort=createdDate,desc',
method:'get',
params:data
})
}
这里的问题是，有多少个接口，你就要编写多少个函数，且数据结构需要查看文档获取。
进阶版本
使用typescript，编写API，通过Type定义数据结构，进行约束。
问题：还是需要手写
优雅版本
swagger其实是一个json-schema描述文档，我们可以基于此，自动生成。
很早之前，写过一个插件generator-swagger-2-t,简单的实现了将swagger生成typescriptapi。
今天，笔者对这个做了升级，方便支持后端返回的泛型数据结构。
安装
需要同时安装Yeoman和-swagger-2-ts
npminstall-ggenerator-swagger-2-ts
然后cd到你的工作目录，执行:
yoswagger-2-ts
按提示
- 输入swagger-ui地址，例如http://192.168.86.8:8051/swagger-ui.html
- 可选生成js或者typescript
- 可以自定义生成的apiclass名称、api文件名
- API支持泛型
也可以通过命令行直接传递参数
yoswagger-2-ts--swaggerUrl=http://localhost:8080/swagger-ui.html--className=API--type=typescript--outputFile=api.ts
- swaggerUrl:swaggeruiurlswaggerui地址
- className：APIclassname类名
- type：typescriptorjavascipt
- outputFile:api文件保存路径
生成代码demo：
exporttypeAccountUserInfo={
disableTime?:string
isDisable?:number
lastLoginIp?:string
lastLoginPlace?:string
lastLoginTime?:string
openId?:string
}
exporttypeBasePayloadResponse={
data?:object
desc?:string
retcode?:string
}
/**
*UserAccountController
*@classUserAccountAPI
*/
exportclassUserAccountAPI{
/**
*changeUserState
*@method
*@nameUserAccountAPI#changeUserState
*@paramaccountUserInfo-accountUserInfo
*@param$domainAPI域名,没有指定则使用构造函数指定的
*/
changeUserState(parameters:{
'accountUserInfo':AccountUserInfo,
$queryParameters?:any,
$domain?:string
}):Promise>{
letconfig: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
returnaxios.request(config)
}
_UserAccountAPI:UserAccountAPI=null;
/**
*获取UserAccountControllerAPI
*return@classUserAccountAPI
*/
getUserAccountAPI():UserAccountAPI{
if(!this._UserAccountAPI){
this._UserAccountAPI=newUserAccountAPI(this.$defaultDomain)
}
returnthis._UserAccountAPI
}
}
/**
*管理系统接口描述
*@classAPI
*/
exportclassAPI{
/**
*API构造函数
*@paramdomainAPI域名
*/
constructor(domain?:string){
this.$defaultDomain=domain||'http://localhost:8080'
}
}
使用
import{API}from'./http/api/manageApi'
//inmain.ts
letapi=newAPI("/api/")
api.getUserAccountAPI().changeUserState({
isDisable:1
openId:'openid'
})
Vue中最佳实践
main.ts全局定义
import{API}from'./http/api/manageApi'
Vue.prototype.$manageApi=newAPI('/api/')
增加.d.ts
增加types文件，方便使用智能提示
import{API}from'@/http/api/manageApi'
import{MarkAPI}from'@/http/api/mark-center-api'
declaremodule"vue/types/vue"{
interfaceVue{
$manageApi:API
$markApi:MarkAPI
}
}
实际使用
现在可以在vue里直接调用了。
this.$manageApi
.getUserAccountAPI().changeUserState({isDisable:1，openId:'openid'})
开源地址
https://github.com/jadepeng/generator-swagger-2-ts
总结
到此这篇关于Vue使用typescript如何优雅的调用swaggerAPI的文章就介绍到这了,更多相关Vue使用typescript内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。