实现axios的二次封装

/*
*xios的二次封装
* 请求前后loading的开启和关闭
* axios请求拦截和响应拦截
* 取消请求函数 （订阅发布的模式）;
*/

import {
	baseURL
} from './config.js';
import axios from 'axios';
import store from '@/store';
import {Loading,Message} from 'element-ui';
//每请求一次创建一个唯一的axios
class AjaxFetch {
	constructor() {
		this.config = {
			withCredentials: true,
			responseType: 'json',
			baseURL: baseURL,
			timeout :3000,
		};
		this.queue={};
	};
	request(option) {
		//创建一个axios实例
		let config = { 
			...this.config,
			...option
		};
		let instance = axios.create();
		this.interceptors(instance);
		return instance(config);
	};
	interceptors(instance){
		instance.interceptors.request.use((config)=>{
			let CancelToken = axios.CancelToken;
			//设置取消函数
			config.cancelToken = new CancelToken((c)=>{
			//c是一个函数   
			store.commit('push_cancel',{fn:c,url:config.url});			//存放取消的函数实例
			});
			if(Object.keys(this.queue).length ==0){
				this._loading=Loading.service({
					lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
				});
			}
			this.queue[config.url]=config.url;
			return config;
		},(err)=>{
			return Promise.reject(err);
		});
		instance.interceptors.response.use((response)=>{
			let {config,request,data} =response;
			store.commit('clear_cancel',config.url);			//存放取消的函数实例
			delete this.queue[config.url];
			if(Object.keys(this.queue).length ==0){
				this._loading.close();
			};
			switch (data.code){
				case 500 : Message ({
					type:'error',
					message:data.msg
				});
				break;
				case 401 : Message ({
					type:'warning',
					message:data.msg
				});
				break;
			}
			return response;
		},(err)=>{
			return Promise.reject(err);
		})
	}
}
export default new AjaxFetch();

在store状态管理存取消函数，以及删除取消函数操作

import Vuex from 'vuex';
import Vue from 'vue';
Vue.use(Vuex);
import * as mutaionsType from './mutations-TYPE';
export default new Vuex.Store({
	state:{
		cancelArray:[],
	},
	mutations:{
		[mutaionsType.clear_cancel]:(state,payload)=>{
			let arr=state.cancelArray.filter(item=>!(item.url.includes(payload)));
			state.cancelArray=[...arr];
		},
		[mutaionsType.push_cancel]:(state,payload)=>{
			state.cancelArray.push(payload);
		}
	},
	actions:{},
	modules:{}
})