使用去抖函数Debounce

//cnpm下载
cnpm install lodash --save


import { debounce } from 'lodash';

  设置一个变量用于记录上一次错误信息和时间戳

let lastError = null;
let lastErrorTimestamp = 0;

// 定义一个函数用于显示错误消息,并进行防抖处理
const showErrorNotification = debounce((message, type) => {
//Message要事先引入  import Message from 'element-ui'
  Message({ message, type, duration: 5 * 1000 });   
}, 2000); // 设置防抖的等待时间,比如 2000 毫秒


// 响应拦截器
service.interceptors.response.use(
  res => {
    // 未设置状态码则默认成功状态
    const code = res.data.code || 200;
    // 获取错误信息
    const msg = errorCode[code] || res.data.msg || errorCode['default'];

    if (code === 500) {
      showErrorNotification(msg, 'error');
      return Promise.reject(new Error(msg));
    } else if (code === 601) {
      showErrorNotification(msg, 'warning');
      return Promise.reject('error');
    } else if (code !== 200) {
      showErrorNotification(msg, 'error');
      return Promise.reject(new Error(msg));
    } else {
      return res.data;
    }
  },
  error => {
    console.log('err' + error);
    let { message } = error;
    if (message == 'Network Error') {
      message = '后端接口连接异常';
    } else if (message.includes('timeout')) {
      message = '系统接口请求超时';
    } else if (message.includes('Request failed with status code')) {
      message = '系统接口' + message.substr(message.length - 3) + '异常';
    }

    // 如果错误信息和上次相同且距离上次时间间隔较短,则不显示错误消息
    const currentTime = Date.now();
    if (message !== lastError || currentTime - lastErrorTimestamp > 2000) {
      showErrorNotification(message, 'error');
      lastError = message;
      lastErrorTimestamp = currentTime;
    }

    return Promise.reject(error);
  }
);

使用 Lodash 的debounce功能来确保错误通知延迟显示。它检查错误消息是否与上一个错误相同以及时间间隔是否较短(例如,2 秒)。如果两个条件都成立,则不会显示错误通知。这样,可以避免同时出现多个错误消息。

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐