• 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
    

      

  • 相关阅读:
    MSSQLSERVER数据库 变量和批处理
    MSSQLSERVER数据库 事务
    MSSQLSERVER数据库 使用C#来操作事务
    MSSQLSERVER数据库 视图
    Delphi中DBGrid行列颜色设置
    C#中调用SQL存储过程(带输入输出参数的例子)
    用Visual C#调用Windows API函数
    c#日期时间的操作的函数总结[转]
    C# 序列化与反序列化
    利用C#事务处理对数据库进行多重操作
  • 原文地址:https://www.cnblogs.com/MainActivity/p/12107071.html
Copyright © 2020-2023  润新知