利用Axios拦截器实现请求超过一定时间，则显示加载动画

声明

  本文章是对 【vue开发问题-解决方法】（八）利用axios拦截器实现elementUI中加载动画，控制加载区域 这篇文章的补充。

  补充点：

1. 一个页面请求时间超过一定时间，则显示动画。
2. 实现部分请求不要显示动画。

项目简介

  Vue.js v2.7.10、Axios、Element UI。

需求介绍

  需求是实现在一个页面（一个页面可能有多个请求）向后台请求数据时，如果请求时间超过一定时间（如800毫秒），那么显示加载动画，（该页面所有的）请求完成动画消失；针对个别请求，采用加参数的方式实现不要显示加载动画。

  注意下面5句话（换句话说）：

1. 一个页面可能有多个请求。
2. 一个页面请求时间超过800毫秒，则显示动画。
3. 一个页面显示动画是一次性的。
4. 当前页面所有请求完毕后再清除动画。
5. 可以实现部分请求不要显示动画。

实现方法

  实现方法可以借助Axios拦截器，在请求前准备显示动画，请求结束清除动画。

// 请求拦截器
axios.interceptors.request.use(function (config) {
    // 不传递默认开启loading，传递 hideloading=true 则不显示loading
    if (!config.hideloading) {
        showFullScreenLoading();
    }
    return config;
}, function (error) {
    // 对请求错误做些什么
    console.log('requestError', error);
    return Promise.reject(error);
});
// 响应拦截器
axios.interceptors.response.use(function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 响应后则清除定时器、关闭加载动画
    tryHideFullScreenLoading();
    return response;
}, function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    console.log('responseError', error)

    // 响应后则清除定时器、关闭加载动画
    tryHideFullScreenLoading();

    return Promise.reject(error);
});

  Element UI 显示loading加载动画方法为：

let loadingTimeout = null;
// 显示loading加载动画
let loading;
function startLoading() {
    loading = Vue.prototype.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.6)',
    });//自定义加载动画样式
}

  清除loading加载动画

// 清除loading加载动画
function endLoading(){
    clearTimeout(loadingTimeout);
    loadingTimeout = null;
    if(loading !== undefined){
        loading.close();
    }
}

  需要考虑一个问题，可能同时发起多个请求，而我们显示动画是一次性的，即等当前所有请求完毕后再清除动画。

// 声明一个对象用于存储请求个数
let needLoadingRequestCount = 0;
function showFullScreenLoading() {
    if (needLoadingRequestCount === 0) {
        // 800毫秒没有响应，则显示加载动画
        loadingTimeout = setTimeout(() => {
            startLoading();
        }, 800);
    }
    needLoadingRequestCount++;
}
function tryHideFullScreenLoading() {
    if (needLoadingRequestCount <= 0){
        return;
    }
    needLoadingRequestCount--;
    if (needLoadingRequestCount === 0) {
        endLoading();
    }
}

  至此，实现了利用Axios拦截器实现请求超过一定时间，则显示加载动画。
  接下来，处理“部分请求不要显示动画”。举例，封装GET请求，传入自定义参数，实现部分请求不要显示动画。

// TODO 项目网址
let baseUrl = 'http://www.xyz.com/xxxxxx?';
/**
 *
 * @param url        m=x&c=y
 * @param params     请求参数
 * @param customConf 用户自定义参数集合
 *                   如 {hideloading:true}，则不显示loading
 * @returns {*}
 */
function httpGet(url, params, customConf) {
    try {
        let conf = {
            params: params,
        };
        for(let i in customConf){
            conf[i] = customConf[i];
        }
        const response = axios.get(`${baseUrl}${url}`, conf);
        return response;
    } catch (error) {
        return error;
    }
}

  至此，实现部分请求不要显示动画。

参考文献

1. 【vue开发问题-解决方法】（八）利用axios拦截器实现elementUI中加载动画，控制加载区域 https://www.cnblogs.com/qiuyueding/p/9258886.html
2. Runoob 菜鸟教程 Vue.js Ajax(axios) https://www.runoob.com/vue2/vuejs-ajax-axios.html