Vue Axios响应拦截器Message弹框多次出现解决方案
功能来确保错误通知延迟显示。它检查错误消息是否与上一个错误相同以及时间间隔是否较短(例如,2 秒)。如果两个条件都成立,则不会显示错误通知。这样,可以避免同时出现多个错误消息。设置一个变量用于记录上一次错误信息和时间戳。使用去抖函数Debounce。使用 Lodash 的。
·
使用去抖函数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 秒)。如果两个条件都成立,则不会显示错误通知。这样,可以避免同时出现多个错误消息。
更多推荐
已为社区贡献1条内容
所有评论(0)