axios-api

@no-996/axios-api基于 axios 可建设结构化实例的工具，有以下特点：

1. 基于 axios，兼容 axios 的 api，可无缝的迁徙应用。
2. 内置了两种罕用的申请终止（基于cancelToken）场景，可避免接口反复调用。
3. 内置了接口调用的缓存机制，在设置的有效期内，可从缓存中取得历史申请后果。
4. 内置了接口地址模板插入性能，满足基于 url 蕴含变量值的场景。
5. 要害：通过结构化的 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.jsimport 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.jsexport 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.vueimport Vue from 'vue'import instance from './api'// ...Vue.prototype.$api = instance// ...

留神，示例中如此挂载到Vue.prototype，须要补充针对Vue.prototype申明，如下：

// src/index.d.tsimport 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申请，从缓存中获取历史返回后果。

接口定义配置阐明

/** * 参数元数据内容 / 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配置阐明

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"}