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.有朋友说开发是会开发了,但不知道怎么调用啊? ...
随机推荐
- sentry 在加载模块时闪退
这是一个很久之前的问题了,今天记录一下,以便遇到同样问题的同学能够看到此文章 崩溃环境: 目前仅收到 windows 7 的部分用户反馈,在程序启动时发生闪退 问题分析: 查看用户提供的日志,可以看见 ...
- win32 - 使用GDI+从资源中获取图像并加载
很多时候我们习惯使用GDI+中Image类来加载本地文件,但是有时候我们需要资源中从加载png格式的图片时,却无法使用该类. 我们可以使用FindResource,LoadResource和LockR ...
- [攻防世界][Reverse]xxxorrr
将目标文件拖入IDA 反汇编main函数 __int64 __fastcall main(int a1, char **a2, char **a3) { int i; // [rsp+Ch] [rbp ...
- Taurus.MVC WebMVC 入门开发教程2:一个简单的页面呈现
前言: 在上一篇中,我们了解了如何下载.配置和运行 Taurus.MVC WebMVC 框架. 现在,让我们开始编写一个简单的页面并进行呈现. 步骤1:创建控制器 首先,我们需要创建一个控制器来处理页 ...
- OpenCV开发笔记(五十九):红胖子8分钟带你深入了解分水岭算法(图文并茂+浅显易懂+程序源码)
若该文为原创文章,未经允许不得转载原博主博客地址:https://blog.csdn.net/qq21497936原博主博客导航:https://blog.csdn.net/qq21497936/ar ...
- matplotlib画图中x轴过于密集的解决办法
import matplotlib.ticker as ticker ax.xaxis.set_major_locator(ticker.MultipleLocator(base=10)) # tic ...
- .net core6 Autofac依赖注入
一.引言 .net core6在文件方面是精简了,所以配置方面也发生了部分变化:下面记录下.net core6中怎么配置Autofac 进行依赖注入. 二.项目创建 1).首先引用两个包:在Nuget ...
- [软件工程] CMMI是什么?
序 能力成熟度模型集成(CMMI) 一.CMMI(能力成熟度模型集成)概述 CMMI是由美国软件工程学会(software engineering institue,简称SEI)制定的一套专门针对软件 ...
- 小程序开发:接入腾讯云的人像动漫化api接口
接口如下: 图片的传参方式有两种,一种是传图片的base64,一种是图片url: 我打算免费版使用base64,如果付费用户支持永久存储历史的图片记录(图片存储到腾讯云对象存储中). 前端框架我用的u ...
- FolkMQ 作个简单的消息中间件(最简单的那种), v1.3.1 发布
功能简介 角色 功能 生产端(或发起端) 发布消息.定时消息(或叫延时).顺序消息.可过期消息.事务消息.发送消息(rpc)支持 Qos0.Qos1 消费端(或接收端) 订阅.取消订阅.消费-ACK( ...