axios 配置攔截器 並且接口請求小於200ms的 不顯示loading

// 配置axios攔截器
import axios from 'axios';
import store from '../store'; // 追加token
import {Bus} from "../service/bus";
// import router from '../router' // 路由跳轉
// 創建axios實例
const clearTimeoutByUrl = (url, requestList) => {
    for (let item in requestList) {
        if (url === requestList[item]['url']) {
            clearTimeout(requestList[item]['timeId']);
        }
    }
}
const service = axios.create({
    // baseURL: process.env.VUE_APP_URL, // 接口可能會分模塊調用 所以不做全局配置
    timeout: 50000 // 請求超時時間
});
// request攔截器,在請求之前做一些處理
service._requestCount = 0; // 累加請求次數
service._requestTimeIdList = [];
service.interceptors.request.use(
    config => {
        service._requestCount++;
        // 如果接口請求小於200ms的話 那麼就不顯示loading
        const timeId = setTimeout(() => {
            store.commit('handleLoading', true);// 顯示loading
        }, 200);
        service._requestTimeIdList.push({
            timeId: timeId,
            url: config.url
        });
        return config
    },
    error => {
        Promise.reject(error)
    }
)

// response 攔截器,數據返回後進行一些處理
service.interceptors.response.use(
    response => {
        service._requestCount--;
        // clear 200ms 後準備展示的loading
        clearTimeoutByUrl(response.config.url, service._requestTimeIdList);
        if (service._requestCount <= 0) {
            store.commit('handleLoading', false);
        }
        const res = response.data;
        return res;
    },
    (error) => {
        service._requestCount--;
        clearTimeoutByUrl(error.config.url, service._requestTimeIdList);
        if (service._requestCount <= 0) { // 當全部的接口請求完畢後 關閉loading
            store.commit('handleLoading', false);// 隱藏loading
        }
        Bus.showDefaultToast({
            showClose: true,
            message: '請求出錯! 請稍後重試!',
            type: 'error',
            duration: 0
        })
        Promise.reject('異常', error);
    }
)
export default service