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

前端如何优雅的调用呢?

入门版

根据文档,用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

按提示

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

 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里直接调用了。

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

开源地址

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

欢迎star!


作者:Jadepeng

出处:jqpeng的技术记事本--http://www.cnblogs.com/xiaoqi

您的支持是对博主最大的鼓励,感谢您的认真阅读。

本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

Vue 使用typescript, 优雅的调用swagger API的更多相关文章

  1. 如何更优雅地对接第三方API

    本文所有示例完整代码地址:https://github.com/yu-linfeng/BlogRepositories/tree/master/repositories/third 我们在日常开发过程 ...

  2. 开源小工具 - swagger API访问代码生成器(js/typescript)

    现在流行前后端分离,后端通常会使用swagger生成api文档,提供给前端的同事来调用,一般前端是查看这个文档,根据文档说明编写调用代码.其实,swagger已经提供了足够多的描述信息,我们可以基于s ...

  3. vue 服务代理 调用第三方api

    项目中前期需要调用第三方API来获取汇率.因为直接调用会有跨域的问题,所以使用来服务代理. 在config配置代理可以这样写: 而调用接口就可以这样写: 坑:配置完成后一直报500,开始怀疑人生.最后 ...

  4. 如何优雅的使用Fegin去构造通用的服务调用的API

    第一步: 创建一个公共的API服务:命名为api(根据自己实际情况进行命名) <?xml version="1.0" encoding="UTF-8"?& ...

  5. SpringBoot 优雅整合Swagger Api 自动生成文档

    前言 一个好的可持续交付的项目,项目说明,和接口文档是必不可少的,swagger api 就可以帮我们很容易自动生成api 文档,不需要单独额外的去写,无侵入式,方便快捷大大减少前后端的沟通方便查找和 ...

  6. 一句代码,更加优雅的调用KVO和通知

    来源:wazrx 链接:http://www.jianshu.com/p/70b2503d5fd1 写在前面 每次使用KVO和通知我就觉得是一件麻烦的事情,即便谈不上麻烦,也可说是不方便吧,对于KVO ...

  7. Swagger API文档集中化注册管理

    接口文档是前后端开发对接时很重要的一个组件.手动编写接口文档既费时,又存在文档不能随代码及时更新的问题,因此产生了像swagger这样的自动生成接口文档的框架.swagger文档一般是随项目代码生成与 ...

  8. Swagger API文档

    Swagger API文档集中化注册管理   接口文档是前后端开发对接时很重要的一个组件.手动编写接口文档既费时,又存在文档不能随代码及时更新的问题,因此产生了像swagger这样的自动生成接口文档的 ...

  9. Vue Cli3 TypeScript 搭建工程

    Vue Cli3出来也一段时间了,我想尝试下Vue结合TypeScript搭建个工程,感受下Vue下用TS...网上有一篇讲的非常详细的教程  vue-cli3.0 搭建项目模版教程(ts+vuex+ ...

随机推荐

  1. [Qt]执行cmd命令

    要加 /c 参数 QProcess p; p.start("cmd", QStringList()<<"/c"<<"ping ...

  2. 标准库sys

    sys模块的主要函数介绍,结合官方文档说明和实例.This module provides access to some variables used or maintained by the int ...

  3. 为物联网而生:高性能时间序列数据库HiTSDB商业化首发!

    为什么80%的码农都做不了架构师?>>>   摘要: 近日,阿里云宣布高性能时间序列数据库 (High-Performance Time Series Database , 简称 H ...

  4. 洛谷P3018 [USACO11MAR]树装饰Tree Decoration

    洛谷P3018 [USACO11MAR]树装饰Tree Decoration树形DP 因为要求最小,我们就贪心地用每个子树中的最小cost来支付就行了 #include <bits/stdc++ ...

  5. 思维+模拟--POJ 1013 Counterfeit Dollar

    Sally Jones has a dozen Voyageur silver dollars. However, only eleven of the coins are true silver d ...

  6. web安全笔记

    判断网站是否伪静态 把.html后缀即可或者加.php?id=99 例子:33_99.html   去掉.html和_变成33.php?id=99 即可判断是否伪静态 判断网站是否在win或者linu ...

  7. 应用开发实践之关系型数据库(以MySql为例)小结

    本文主要是对目前工作中使用到的DB相关知识点的总结,应用开发了解到以下深度基本足以应对日常需求,再深入下去更偏向于DB本身的理论.调优和运维实践. 不在本文重点关注讨论的内容(可能会提到一些): 具体 ...

  8. 03_CSS入门和高级技巧(1)

    上节课知识的复习 插入图片,页面中能够插入的图片类型:jpg.jpeg.bmp.png.gif:不能的psd.fw. 语法: <img src="路径" alt=" ...

  9. MySQL 入门(3):事务隔离

    摘要 在这一篇内容中,我将从事务是什么开始,聊一聊事务的必要性. 然后,介绍一下在InnoDB中,四种不同级别的事务隔离,能解决什么问题,以及会带来什么问题. 最后,我会介绍一下InnoDB解决高并发 ...

  10. SAP ME31K SUBOBJECT_NOT_FOUND

    SUBOBJECT_NOT_FOUND 在使用BAPI:BAPI_CONTRACT_CREATE创建协议时报错, 错误位置在此处,子对象没找到 GOOGLE到相关解决方案 事务代码:SLG0 新增对象 ...