调回了两个后端api,都返回401错误,前端接收到后ElMessage提示两个相同的错误信息,如何只让前端提示一次
时间: 2024-09-17 08:01:41 浏览: 13
如果你的前端应用程序在尝试访问两个API并都接收到401错误后,通过ElMessage显示了两次相同的错误信息,你可以采取以下步骤来避免重复提示:
1. **检查错误缓存**:
创建一个全局变量或者在适当的地方存储最近接收到的错误信息,当再次接收到同样的错误时,先检查这个缓存而不是直接显示新的消息。
```javascript
let lastError = '';
async function handleApiErrors(response) {
if (response.status === 401 && !lastError.includes(response.statusText)) {
lastError = response.statusText;
ElMessage.error(lastError);
}
}
```
2. **事件监听和解绑**:
如果API请求是异步的,可以在请求完成后取消上一个错误提示的监听,确保不会在同一时间显示多次错误。
```javascript
let errorTimeoutId;
handleApiErrors(apiCall1()); // 第一次请求
errorTimeoutId = setTimeout(() => {
clearTimeout(errorTimeoutId);
handleApiErrors(apiCall2()); // 如果第一次失败,再尝试第二次
}, 500); // 设置一个短延迟
// 添加清除监听的函数
function clearErrorMessage() {
ElMessage.remove();
errorTimeoutId = null;
}
// 在请求完成或遇到错误后清除
apiCall1().then(clearErrorMessage).catch(clearErrorMessage);
// 对于第二个API请求,同样处理
apiCall2().then(clearErrorMessage).catch(clearErrorMessage);
```
3. **Promise.all 错误处理**:
如果你在同步或异步环境中批量发送请求,你可以使用`Promise.all`来统一处理所有请求的结果,确保只在首次出现错误时显示。
```javascript
const promises = [apiCall1(), apiCall2()];
try {
await Promise.all(promises);
} catch (err) {
if (err.response.status === 401) {
lastError = err.response.statusText;
ElMessage.error(lastError);
}
}
```
通过以上方法,前端应该只会针对第一个接收到的401错误显示一次提示信息。