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

  

posted @ 2019-12-27 14:20  飞尽堂前燕  阅读(1052)  评论(0编辑  收藏  举报