zoukankan      html  css  js  c++  java
  • 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
    

      

  • 相关阅读:
    yii主题
    aptana studio 使用技巧整理
    big database url
    yii表单输入元素
    下载,和scp上传问题
    对缓存的思考——提高命中率
    php用户名密码
    openx -书表添加字段
    搜索
    python——常用模块2
  • 原文地址:https://www.cnblogs.com/MainActivity/p/12107071.html
Copyright © 2011-2022 走看看