demo

实现封装代码的文件

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
10
11
12
13
14
15
import axios from 'axios'


if (process.env.NODE_ENV === 'development') {
  axios.defaults.baseURL = 'http://dev.xxx.com'
} else if (process.env.NODE_ENV === 'production') {
  axios.defaults.baseURL = 'http://prod.xxx.com'
}

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
    }
    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
53
import Axios from './axios.config'

/**
 * 请求方法
 *
 * @param {String}    url      接口地址
 * @param {String}    methods  请求方法
 * @param {Object}    headers  headers 设置
 * @param {Object}    data     参数
 * @param {Boolean}   silent   静默模式
 * @param {Boolean}   all      返回接口所有数据（包括code、message、data）/ 只是data
 * @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()
  }
}

返回promise的request

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
import Axios from './axios.config'

/**
 * 请求方法
 *
 * @param {String}    url      接口地址
 * @param {String}    methods  请求方法
 * @param {Object}    headers  headers 设置
 * @param {Object}    data     参数
 * @param {Boolean}   silent   静默模式
 *
 */

export default function request({ url = '', method = 'get', data = {}, params = {}, headers = {}, silent = false } = {}) {
  // console.log(`${url}============>`, methods, data, silent)
  const id = `${url}TIME${new Date().getTime()}` // 生成id
  if (!silent) {
    // 非静默模式，压入请求队列
    Axios.setRequestList({ id })
  }

  return Axios.axios({
    url,
    method,
    headers,
    data,
    params,
  })
    .then(() => {
      Axios.setRequestList({ el: id, remove: true }) // 请求完成后，出队
    })
    .catch(error => {
      Axios.setRequestList({ el: id, remove: true }) // 请求完成后，出队
      if (!silent) Axios.Toast(error.msg || error.message || error)
    })
}

git源码地址

axios 中文使用文档