实现封装代码的文件

1
2
3
4
5
6
7
8
9
10
11
┣━  http               // 采用类中的set,get方式监听请求接口队列
┃ ┣━ axios.config.js // 创建axios实例
┃ ┣━ default.js // 默认配置
┃ ┣━ index.js // 导出最终的request方法
┃ ┣━ request.js // request拦截器
┃ ┣━ response.js // response拦截器
┣━ http_store // 试了下采用vuex 的 watch api 监听请求队列
┃ ┣━ default.js
┃ ┣━ index.js // vuex监听实现代码放在了这里
┃ ┣━ request.js
┃ ┣━ response.js

实现原理

是在类class 中声明 requestList请求队列变量,然后通过set get函数监听请求队列变化,当请求队列为空的时候,关闭loading,反之显示。

axios.config.js

实现静默功能的主要代码,和声明axios实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
import { Indicator, Toast } from 'mint-ui'

import axios from './default'
import request from './request'
import response from './response'

export default new class Axios {
constructor() {
this.axios = axios.create() // 创建实例
this.axios.interceptors.request.use(
// 添加请求拦截器
request.config,
request.error,
)
this.axios.interceptors.response.use(
// 添加响应拦截器
response.res,
response.error,
)

this._requestList = []
this.Indicator = Indicator
this.Toast = Toast
}

get requestList() {
return this._requestList
}

set requestList(list) {
this._requestList = list // 设置请求队列
if (this._requestList.length === 0) {
// 如果请求队列为空了,就关闭loading
this.Indicator.close()
} else {
// 反知显示loading
this.Indicator.open({
spinnerType: 'fading-circle',
})
}
}

/**
* 当请求队列发生变化的时候,触发此方法
* @param {Object} id 请求队列入队或出队的id
* @param {Boolean} remove true: 出队 false: 默认 进队
*/
setRequestList({ id = '', remove = false } = {}) {
const array = [...this._requestList]
remove ? array.splice(array.indexOf(id), 1) : array.push(id)
this.requestList = array
}
}()

default.js

axios默认配置

1
2
3
4
5
6
7
8
9
import axios from 'axios'

axios.defaults.baseURL = ''
axios.defaults.withCredentials = true
axios.defaults.headers.common['Content-Type'] = 'application/json'
axios.defaults.baseURL = '/'
axios.defaults.timeout = 5000

export default axios

request.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import qs from 'qs'

export default {
config: config => {
if (
config.method === 'post' ||
config.method === 'put' ||
config.method === 'delete'
) { // 序列化
config.headers['Content-Type'] = 'application/json; charset=utf-8'
config.data = qs.stringify(config.data);
}
return config
},
error: error => {
return Promise.reject(error)
}
}

response.js

1
2
3
4
5
6
7
8
9
10
11
12
13
export default {
res: res => {
let data = res.data
if (~~data.code === 200) {
return data.data
}
return Promise.reject(data)
},
error: error => {
return Promise.reject(error)
}

}

index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
import Axios from './axios.config'

/**
* 请求方法
*
* @param {String} url 接口地址
* @param {String} methods 请求方法
* @param {Object} headers headers 设置
* @param {Object} data 参数
* @param {Boolean} silent 静默模式
* @param {Function} success 请求成功回调
* @param {Function} fail 请求失败回调
* @param {Function} complete 请求结束回调
*
*/

export default async function request({
url = '',
method = 'get',
data = {},
params = {},
headers = {},
success = () => {},
fail = () => {},
complete = () => {},
silent = false,
all = false,
} = {}) {
// console.log(`${url}============>`, methods, data, silent)
const id = `${url}TIME${new Date().getTime()}` // 生成id
if (!silent) {
// 非静默模式,压入请求队列
Axios.setRequestList({ id })
}
try {
const result = await Axios.axios({
url,
method,
headers,
data,
params,
})
Axios.setRequestList({ el: id, remove: true }) // 请求完成后,出队
all ? success(result) : success(result.data)
} catch (error) {
Axios.setRequestList({ el: id, remove: true }) // 请求完成后,出队
if (!silent) Axios.Toast(error.msg || error.message || error)
fail(error)
} finally {
complete()
}
}

git源码地址

axios 中文使用文档