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:{
     }
})