Vue Axios响应拦截器Message弹框多次出现解决方案

最新推荐文章于 2024-04-30 15:42:54 发布

layer..

最新推荐文章于 2024-04-30 15:42:54 发布

阅读量1.3k

点赞数

文章标签：前端 elementui vue

本文链接：https://blog.youkuaiyun.com/qq_44033191/article/details/131975985

版权

文章介绍了如何利用Lodash的debounce函数来优化错误通知的显示，防止短时间内频繁出现相同错误消息。在响应拦截器中，当错误发生时，如果错误信息与上一次相同且时间间隔小于2秒，则不会立即显示错误通知，以此提供更好的用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用去抖函数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 秒）。如果两个条件都成立，则不会显示错误通知。这样，可以避免同时出现多个错误消息。