axios-api,js结构化定义、调用业务api接口。
axios-api
@no-996/axios-api基于 axios 可建立结构化实例的工具,有以下特点:
- 基于 axios,兼容 axios 的 api,可无缝的迁移使用。
- 内置了两种常用的请求终止(基于cancelToken)场景,可防止接口重复调用。
- 内置了接口调用的缓存机制,在设置的有效期内,可从缓存中获得历史请求结果。
- 内置了接口地址模板插入功能,满足基于 url 包含变量值的场景。
- 关键:通过结构化的 api 定义生成结构化的 api 请求实例,在项目中畅快的快速调用业务接口。配套使用 webpack 插件(@no-996/axios-api-webpack-plugin),可以自动生成 d.ts 声明文件,在 IDE 中可以获得 api 定义的提醒信息。
第一次生成d.ts文件后,vscode可能需要重启才能显示请求示例的调用提示!
目录
安装使用
npm install --save @no-996/axios-api
// src/api/index.js
import ApiModule from '@no-996/axios-api'
import options from './options'
export default new ApiModule(
// 接口定义
options,
// axios配置
{
baseURL: 'https://jsonplaceholder.typicode.com',
onUploadProgress: (progressEvent, percentCompleted) => {
console.log(percentCompleted)
},
},
// axios-api配置
{
cacheStorage: localStorage,
debug: true,
}
)
import instance from './api'
// 即可根据结构化的实例进行调用,如:
// instance.module001.request()
// instance.module001.sub.request()
// instance.module002.request()
// ...
结构化的api定义
// src/api/options/index.js
export default [
{
name: 'posts',
des: '帖子',
url: '/posts',
params: {
userId: undefined,
},
children: [
{
name: 'comments',
des: '评论',
url: '/posts/{postId}/comments',
urlParams: {
postId: undefined,
},
metadata: {
urlParams: {
postId: {
name: '帖子id',
required: true,
},
},
},
},
],
metadata: {
params: {
userId: {
name: '用户id',
des: '用户唯一标识',
type: 'string',
},
},
},
},
{
name: 'albums',
url: '/albums',
des: '专辑',
params: {
id: undefined,
},
children: [],
},
{
name: 'photos',
url: '/photos',
des: '相片',
params: {},
children: [],
cache: 3000,
},
{
name: 'todos',
url: '/todos',
des: '待办事项',
params: {},
children: [],
cancel:'current'
},
{
name: 'users',
url: '/users',
des: '用户',
params: {},
children: [],
cancel:'previous'
},
]
结构化的api请求实例
通过结构化的 api 定义生成结构化的 api 请求实例,在项目中畅快的快速调用业务接口。
生成d.ts声明文件
配套使用webpack插件(@no-996/axios-api-webpack-plugin),根据结构化定义,可以自动生成 d.ts 声明文件,在 IDE 中可以获得 api 定义的提醒信息:
没有定义metadata:
一层:


二层:


调用提示:

定义了metadata:
调用提示:


关于上述示例
示例使用Vue,并把请求实例挂载至Vue.prototype上:
// src/App.vue
import Vue from 'vue'
import instance from './api'
// ...
Vue.prototype.$api = instance
// ...
注意,示例中如此挂载到Vue.prototype,需要补充针对Vue.prototype声明,如下:
// src/index.d.ts
import Vue from 'vue'
import api from '@/api/index'
declare module 'vue/types/vue' {
interface Vue {
$api: typeof api
}
}
请求中止cancel
cancel: 'current'
保留当前正在进行的请求,中止后面重复的请求。

cancel: 'previous'
放弃之前的请求,保留最新提交的请求。

缓存cache
cache: 3000
3秒内不再request请求,从缓存中获取历史返回结果。

接口定义配置说明
| 配置 | 类型 | 必填 | 默认值 | 说明 |
|---|---|---|---|---|
| baseURL | string/function/Promise | 否 | '' | 原baseURL的扩展,支持function/Promise返回 |
| onUploadProgress | (progressEvent: any, percentCompleted: number) => void | 否 | / | 原onUploadProgress的扩展,增加第二参数,返回百分比值 |
| name | string | 是 | / | 接口名 |
| des | string | 否 | / | 接口描述 |
| cancel | 'current'/'previous' | 否 | / | 请求中止方式 |
| cache | number | 否 | / | 接口结果缓存时长毫秒数 |
| urlOnly | boolean | 否 | / | 是否仅返回处理好的url地址(融合params、urlParams) |
| urlParams | object | 否 | / | url地址模板替换映射 |
| metadata | ApiMetadata | 否 | / | 请求参数的元数据描述,用于d.ts生成并产生智能提示 |
| children | array<api配置> | 否 | [] | api配置嵌套 |
/**
* 参数元数据内容 / Params metadata info
*/
interface ApiMetadataItem {
/**
* 参数名
* / field name
*/
name: string
/**
* 参数描述
* / field des
*/
des: string
// TODO: 参数校验
/**
* 参数类型
* / field type
*/
type?: string
/**
* 参数必填
* / field required
*/
required?: boolean
/**
* 自定义校验
* / field validator
*/
// validator?:
}
/**
* 参数元数据 / Params metadata
*/
interface ApiMetadata {
[index: string]: ApiMetadataItem | string
}
axios-api配置说明
| 配置 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| debug | boolean | false | 是否显示调试日志 |
| cacheStorage | CacheStorage | / | 缓存工具(如:localStorage、sessionStorage) |
interface CacheStorage {
// 获取缓存
getItem(key: string): string | null
// 设置缓存
setItem(key: string, value: string): void
}
依赖说明
"dependencies": {
"@types/md5": "2.3.1",
"@types/qs": "6.9.7",
"@types/uuid": "8.3.4",
"axios": "0.24.0",
"md5": "2.3.0",
"qs": "6.7.0",
"uuid": "8.3.2"
}
axios-api,js结构化定义、调用业务api接口。的更多相关文章
- Solr系列四:Solr(solrj 、索引API 、 结构化数据导入)
一.SolrJ介绍 1. SolrJ是什么? Solr提供的用于JAVA应用中访问solr服务API的客户端jar.在我们的应用中引入solrj: <dependency> <gro ...
- 【nodejs】使用Node.js实现REST Client调用REST API
最近在产品中开发基于REST的API接口,结合自己最近对Node.js的研究,想基于它开发一个REST Client做测试之用. 通过初步研究,Node.js开发HTTP Client还是挺方便的. ...
- js结构化命名的思考
var koooke ={androidShare:{ show : function() {alert(1000)}}};koooke.androidShare.show(); 以上JS是偶然缩写. ...
- 深入研究 Win32 结构化异常处理(好多相关文章)
摘要 就像人们常说的那样,Win32 结构化异常处理(SEH)是一个操作系统提供的服务.你能找到的所有关于 SEH 的文档讲的都是针对某个特定编译器的.建立在操作系统层之上的封装库.我将从 SEH 的 ...
- 深入研究 Win32 结构化异常处理(作者博客有许多SEH的研究文章)
摘要 就像人们常说的那样,Win32 结构化异常处理(SEH)是一个操作系统提供的服务.你能找到的所有关于 SEH 的文档讲的都是针对某个特定编译器的.建立在操作系统层之上的封装库.我将从 SEH 的 ...
- 【转】用C#调用Windows API向指定窗口发送
一.调用Windows API. C#下调用Windows API方法如下: 1.引入命名空间:using System.Runtime.InteropServices; 2.引用需要使用的方法,格式 ...
- 页面结构化在 Android 上的尝试
本文来自于腾讯Bugly公众号(weixinBugly),未经作者同意,请勿转载,原文地址:https://mp.weixin.qq.com/s/M45DM5Ix7a2fmrsE8VPvxg 作者:b ...
- 用C#调用Windows API向指定窗口发送按键消息 z
用C#调用Windows API向指定窗口发送 一.调用Windows API. C#下调用Windows API方法如下: 1.引入命名空间:using System.Runtime.Interop ...
- 用C#调用Windows API向指定窗口发送按键消息
一.调用Windows API. C#下调用Windows API方法如下: 1.引入命名空间:using System.Runtime.InteropServices; 2.引用需要使用的方法,格式 ...
- jQuery跨域调用Web API
我曾经发表了一篇关于如何开发Web API的博客,链接地址:http://www.cnblogs.com/guwei4037/p/3603818.html.有朋友说开发是会开发了,但不知道怎么调用啊? ...
随机推荐
- 使用Java线程同步工具类CyclicBarrier
如何使用 java.util.concurrent.CyclicBarrier是Java并发并发编程中的线程同步工具类,基于java.util.concurrent.locks.ReentrantLo ...
- Qt开发技术:QtCharts(一)QtCharts基本介绍以及图表框架详解
若该文为原创文章,未经允许不得转载原博主博客地址:https://blog.csdn.net/qq21497936原博主博客导航:https://blog.csdn.net/qq21497936/ar ...
- linux下安装django2.2
安装 pip3 install django==2.2 创建项目 django-admin startproject pyweb 创建应用 django-admin startapp app01 修改 ...
- 基于javaweb的服装租赁网站
演示 技术+环境+工具 jdk8+maven.3.2.1+mysql5.7+idea+navicat+spring+springmvc+mybatis+bootstrap+jquery+ajax
- 【LeetCode剑指offer#06】实现pow函数、计算x的平方根
实现pow函数 实现 pow(x, n) ,即计算 x 的整数 n 次幂函数(即,xn ). 示例 1: 输入:x = 2.00000, n = 10 输出:1024.00000 示例 2: 输入:x ...
- 【Azure 应用服务】 在App Service中无法上传证书[Private Key Certificates (.pfx)],导入Azure Key Vault中的证书也无法成功
问题描述 在App Service的TLS/SSL settings页面,切换到Private Key Certificates (.pfx),通过Import Key Vault Certifica ...
- C#多线程(5):资源池限制
目录 Semaphore.SemaphoreSlim 类 Semaphore 类 示例 示例说明 信号量 SemaphoreSlim类 示例 区别 Semaphore.SemaphoreSlim 类 ...
- mysql数据库表或行,被锁,杀死进程
-- 查询进行 SHOW PROCESSLIST; -- 删除进程 kill 22459; -- 查找正在进行的 select * from information_schema.innodb_trx ...
- 【工具】用nvm管理nodejs版本切换,真香!
前言 缘由 换个nodejs版本比换个媳妇还难,nvm堪称管理nodejs版本神器 事情的起因,公司的一些老项目需要依赖稳定老版本的nodejs,但是自己的一些项目所需要的是更高版本的nodejs,这 ...
- 一文搞懂Vue的MVVM模式与双向绑定
v-model 是 Vue.js 框架中用于实现双向数据绑定的指令.它充分体现了 MVVM(Model-View-ViewModel)模式中的双向数据绑定特性.下面我们将详细解释 v-model 如何 ...