使用

import { ApiCreator } from 'paiui'
//
// 接口定义
import api from '@/api'
//
// axios配置
const axiosCreateConfig = { baseURL: 'https://...' }
//
// 初始化
const apiCreator = new ApiCreator(api, axiosCreateConfig)
//
// axios拦截器
apiCreator.interceptors.request.use(
  (config) => {
    // ...
    return config
  },
  (error) => {
    // ...
    return Promise.reject(error)
  }
)
apiCreator.interceptors.response.use(
  (response) => {
    // ...
    return response.data
  },
  (error) => {
    // ...
    return Promise.reject(error)
  }
)
//
// 挂载方法至实例原型（推荐方式）
Vue.prototype.$demo = {
  api: apiCreator.api,
  request: apiCreator.request
}

接口定义目录

// 如目录：
api
 └─moudule1
      └─v1.js
      └─v2.js
      └─index.js
 └─moudule2
      └─v1.js
      └─v2.js
      └─index.js
 └─index.js

调用方式

let data = await this.$demo.api.module1.v1.api1({
  // 接口参数
  attachId: 'b0b517cb3e824ce9843d9190fc8c9e90',
  // ...
})

接口定义文件

// src/api/index.js :
import module1 from './module1'
import module2 from './module2'
export default {
  module1,
  module2,
}

// api/module1/index.js :
import v1 from './v1'
import v2 from './v2'
export default {
  v1,
  v2,
}

// api/module1/v1.js :
export default [
  {
    name: 'api1', // 接口调用名称
    path: '/oss-api/oss/v1/view/attach/{attachId}', // 接口路径
    params: {attachId: undefined}, // 请求参数
    method: 'get', // 请求方式
    responseType: 'json', // 请求结果类型
    direct: false, // 是否直接返回地址
    contentType: 'application/json', // 请求格式
    timeout: 5000, // 请求超时时间
    cancel: null, // 中断请求方式
    cache: null, // 请求结果缓存时间（缓存于内存中，刷新会消失。）
    dataType: '', // 明确数据的提交方式（'data'/'query'）
    filterDisable: false, // 是否跳过参数校验
    headers: {}, // 更多的headers配置
  },
  {
    name: 'api2',
    path: '/oss-api/oss/v1/view/attach/{attachId}',
    params: {attachId: undefined},
    method: 'get',
    responseType: 'json',
    direct: false,
    contentType: 'application/json',
    timeout: 5000,
    cancel: null,
    cache: null,
  },
]

参数说明

path 与 params

// 若定义的path存在'{param}'，将会从params中提取拼接
// 例如接口定义为：
export default [
  {
    // ...
    path: '/oss-api/oss/v1/view/attach/{attachId}',
    params: {attachId: undefined},
    // ...
  },
  // ..
]
// 请求参数为：
let data = await this.$demo.api.module1.v1.api1({
  // 接口参数
  attachId: 'b0b517cb3e824ce9843d9190fc8c9e90',
  // ...
}, {
  // 接口域名
  baseURL: '...',
  // 授权token
  token: '...',
  // oss授权token
  ossToken: '...',
  // 缓存key
  cacheKey: '...',
  // 上传进度事件
  onUploadProgress: (event, percent) => {
    onProgress({ percent })
  },
  // 更多的headers配置
  headers: {
    // ...
  }
})
// 则请求地址将为：
// http://.../oss-api/oss/v1/view/attach/b0b517cb3e824ce9843d9190fc8c9e90

params

所有可能请求的参数均需要在params中配置，可以配置默认值。请求的参数若不存在与params中，则会被清除省略掉（path与params的花括号替换方式不受此约束影响）。

direct

// 若direct为true
// 则此处data === 'http://.../oss-api/oss/v1/view/attach/b0b517cb3e824ce9843d9190fc8c9e90'
let data = await this.$demo.api.module1.v1.api1({
  // 接口参数
  attachId: 'b0b517cb3e824ce9843d9190fc8c9e90',
  // ...
})

cancel

请求中断方式。

可以通过浏览器的开发者工具的Network观察，注意：待此页面加载完成后，设置Network的Presets为slow 3G后，快速点击测试按钮，观察请求结果。

保留最近一次请求，中断其它未结束的相同请求

export default [
  {
    // ...
    cancel: 'previous',
    // ...
  },
  // ...
]

保留第一次未结束请求，中断后面相同的请求

export default [
  {
    // ...
    cancel: 'current',
    // ...
  },
  // ...
]

自定义

export default [
  {
    // ...
    cancel: (current, others) => {
      // 若同时有三个相同请求，则取消后面的相同请求
      if (others.filter((o) => o.hash === current.hash).length > 2) {
        current.cancel()
      }
    }
    // ...
  },
  // ...
]

cache

设定缓存时间长度，相同的请求结果会缓存于内存中，在设定时间范围内将直接返回内存中的数据，不再发出请求。

可以通过浏览器的开发者工具的Network观察

dataType

get、push的数据默认为query的提交方式，可以通过此配置，明确为data的传输方式

直接请求

let data = await this.$demo.request({
  // ...
})

按需引入

import ApiCreator from 'paiui/dist/packages/apiCreator'

参考

axios - Creating an instance

axios - Interceptors