axios-ex

企业级项目axios集成方案

完整文档请查阅： API 完整文档

安装

axios-ex自带了最新版的 axios，可以不用安装axios包

1# 使用npm
2$ npm install axios-ex --save
3
4# 使用yarn
5$ yarn add axios-ex

使用

常规用法

1// {app_root}/src/plugins/axios.js
2import { getCookie, setCookie } from 'js-cool'
3import axiosExtend from 'axios-ex'
4
5/**
6 * 设置请求头
7 *
8 * @param {object} instance AxiosInstance
9 */
10function setHeaders(instance) {
11	instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
12}
13/**
14 * 请求拦截器
15 *
16 * @param {object} config AxiosRequestConfig
17 * @param {object} options 请求参数AxiosExtendRequestOptions
18 * @returns AxiosRequestConfig
19 */
20function onRequest(config, options = {}) {
21	// some codes
22	return config
23}
24/**
25 * 请求错误时执行
26 *
27 * @param {object} err Error
28 */
29function onRequestError(err) {
30	// handler request error
31}
32/**
33 * 响应拦截器
34 *
35 * @param {object} res AxiosResponse<any>
36 * @param {object} options 请求参数AxiosExtendRequestOptions
37 * @returns Promise<unknown>
38 */
39function onResponse(res, options = {}) {
40	if (res.data.success) return res.data
41	return Promise.reject(res.data)
42}
43/**
44 * 响应错误时执行
45 *
46 * @param {object} err Error
47 */
48function onResponseError(err) {
49	// handler response error
50}
51/**
52 * 请求错误或响应错误都执行
53 *
54 * @param {object} err Error
55 */
56function onError(err) {
57	// handler request & response error
58}
59/**
60 * 请求取消
61 *
62 * @param {object} err Error
63 */
64function onCancel(err) {
65	console.error(err.message)
66}
67
68// 实例化
69const axiosEx = new axiosExtend({
70	maxConnections: 30, // 最大同时请求数，默认：0=不限制
71	unique: true, // 是否取消前面的相似请求，默认：false
72	retries: 0, // 重试次数，默认：0=不重试
73	orderly: false, // 是否有序返回，默认：true
74	setHeaders, // 设置请求头的方法
75	onRequest, // 请求拦截器
76	onRequestError, // 请求错误时执行
77	onResponse, // 响应拦截器
78	onResponseError, // 响应错误时执行
79	onError, // 请求错误或响应错误都执行
80	onCancel // 请求取消时的回调
81})
82
83export default options => {
84	// 这里设置 unique 和 orderly 优先级高于实例化时候的配置
85	options.unique = options.unique ?? false
86	options.orderly = options.orderly ?? false
87	// 这里的unique优先级更高
88	return axiosEx.create(options)
89}

定义失败重试的延时方法

1. 自定义重试延迟的时长

   1// 实例化的时候配置
   2const axiosEx = new axiosExtend({
   3	// ...
   4	retryDelay: retryCount => {
   5		return retryCount * 1000
   6	}
   7	// ...
   8})

2. 或者使用axios-ex内置的方法，exponentialDelay 随机递增 0%-50%

   1import axiosExtend, { exponentialDelay } from 'axios-ex'
   2// 实例化的时候配置
   3const axiosEx = new axiosExtend({
   4	// ...
   5	retryDelay: exponentialDelay
   6	// ...
   7})

在 vue2.x 里面使用

有时候我们需要在onRequest或onResponse里面使用this（vue 实例），可以这样写

1import axiosExtend from 'axios-ex'
2
3let axiosEx = null
4// 请求拦截器
5function onRequest(config, options = {}) {
6	// this => vueInstance
7	return config
8}
9// 响应拦截器
10function onResponse(res, options = {}) {
11	// 隐藏loading动画
12	if (this instanceof Vue) {
13		this.$loader.hide()
14	}
15	if (res.data.success) return res.data
16	return Promise.reject(res.data)
17}
18
19export default options => {
20	// 只需要初始化一次
21	if (!axiosEx)
22		axiosEx = new axiosExtend({
23			onRequest: onRequest.bind(this),
24			onResponse: onResponse.bind(this)
25			//...
26		})
27
28	// 显示loading动画
29	if (this instanceof Vue) {
30		this.$loader.show()
31	}
32	return axiosEx.create(options)
33}

问题和支持

Please open an issue here.

License

MIT