共计 3305 个字符,预计需要花费 9 分钟才能阅读完成。
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 可能须要重启能力显示申请示例的调用提醒!
目录
- 装置应用
- 结构化的 api 定义
- 结构化的 api 申请实例
- 申请停止 cancel
- 缓存 cache
- 接口定义配置阐明
- axios-api 配置阐明
- 依赖阐明
装置应用
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"
}
正文完
发表至: javascript
2022-01-16