yypkg 工具函数 API 管理模块 - 文章教程

yypkg 工具函数 API 管理模块

发布于 2021-09-10 字数 5606 浏览 952 评论 0

注:axios 官方默认不使用 ES6 Promise Polyfill,如需兼容低版本环境,请自行添加 ES6 Promise Polyfill详见官方说明

简单使用

import API from 'yypkg/api'

const urls = {
  test: 'https://legox.org/mock/a3e67a40-863c-11e7-9085-0ba4558c07dc'
}

const options = {
  method: 'GET'
}

const api = new API(urls, options)

await api.test()

配置项 options

 

参数名 描述 类型 默认值
engine 请求核心对象 String 'axios'
method 请求方式 String 'POST'
isMock 是否调用模拟接口 Boolean false
throttle 节流时间 Number 0
isRecordHistory 是否记录请求历史 Boolean false
RESTful 是否开启 RESTful 调用 Boolean false
….. 其他 axios 配置项 config

使用局部配置

import API from 'yypkg/api'

const urls = {
  test: {
    url: '//xxx.com/xxx',
    method: 'JSONP'
  }
}

const options = {
  method: 'GET'
}

const api = new API(urls, options)

await api.test() // method: JSONP

局部配置项与全局配置项参数一致,但优先级大于全局配置项

设置请求时配置参数

import API from 'yypkg/api'

const api = new API({
  test: '//xxx.com/xxx'
})

// api.test(data, options)
await api.test({ code: 1 }, { method: 'GET' })

使用 Mock

import API from 'yypkg/api'

const urls = {
  test: {
    url: '//xxx.com/xxx',
    mock: '//yyy.com/yyy'
  }
}

const api = new API(urls, { isMock: true })

await api.test()

如果请求接口没有配置 mock 地址 则请求真实地址

URL 参数

import API from 'yypkg/api'

const api = new API({
  test: 'https://legox.org/mock/:id'
})

await api.test({ code: 1 }, { keys: { id: 'a3e67a40-863c-11e7-9085-0ba4558c07dc' } })

RESTful 调用

import API from 'yypkg/api'

const api = new API({ test: '//xxx.com/xxx' }, { RESTful: true })

// await api.test.GET()
await api.test.get()

// await api.test.POST()
await api.test.post()

// await api.test.PUT()
await api.test.put()

// await api.test.PATCH()
await api.test.patch()

// await api.test.DELETE()
await api.test.delete()

拦截器

import API from 'yypkg/api'

const api = new API({ test: '//xxx.com/xxx' })

// 生命周期 beforeResolveOptions,处于实例调用入口最前面,在合并 options 之前调用
// 返回 data、options 可改变单次请求参数
api.$on('interceptor:beforeResolveOptions', ({ key, url, data, options, namedOptions }) => {
  console.log('interceptor:beforeResolveOptions')

  return { data, options }
})

// 生命周期 beforeRequest,开始请求 engine 之前调用,返回 Promise 可阻塞进程
api.$on('interceptor:beforeRequest', (options) => {
  console.log('interceptor:beforeRequest')
})

// 生命周期 beforeCallbackResponse,回调 response 之前调用,返回 Promise 可阻塞进程
api.$on('interceptor:beforeCallbackResponse', (options, response) => {
  console.log('interceptor:beforeCallbackResponse', response)
})

// 生命周期 afterCallbackResponse,回调 response 之后调用
api.$on('interceptor:afterCallbackResponse', (options, response) => {
  console.log('interceptor:afterCallbackResponse', response)
})

await api.test()

错误处理

import API from 'yypkg/api'

const api = new API({ test: '//xxx.com/xxx' })

api.$on('error', (error, options, throwError) => {
  console.log('error', error)
  throwError('test throw error')
})

try {
  await api.test()
} catch (error) {
  console.log(error) // test throw error
}

自定义 Engine

用于自定义请求核心对象,默认为 axios,包含 fetch

import API from 'yypkg/api'

const api = new API({ test: '//xxx.com/xxx' }, { engine: 'SDK' })

api.$engine('SDK', options => {
  return new Promise(resolve => {
    setTimeout(() => resolve({ code: 1 }), 2000)
  })
})

await api.test()

自定义请求方式

用于丰富扩展指定 engine 的 method

import API from 'yypkg/api'

const api = new API({ test: '//xxx.com/xxx' }, {
  engine: 'axios',
  method: 'SDK'
})

api.$method('axios', axios => {
  axios.SDK = () => new Promise(resolve => {
    setTimeout(() => resolve({ code: 1 }), 2000)
  })
})

await api.test()

历史记录

import API from 'yypkg/api'

const api = new API({ test: '//xxx.com/xxx' }, { isRecordHistory: true })

await api.test()

console.log(api.$history)

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2512 文章
30 评论
82716 人气
更多

推荐作者

瑾兮

文章 11 评论 2

carlo_sn

文章 0 评论 0

15867725375

文章 0 评论 0

a3576419

文章 0 评论 0

wendy

文章 0 评论 0