Question

我写了一个角度错误拦截器，在其中检查401未经授权或会话已过期。它工作完美，但问题是我使用了多个GET API，这些api在会话过期时会抛出多个401。我正在显示js警报并重定向到登录页面。当我收到多个401时，警报框也会显示多次。例如：如果我有3次401。警告框将显示3次。

我使用标志来检查是否打开了一个警报框，将其设置为true，将其余警报设置为false ..但是它不起作用。

intercept(req: HttpRequest<any>, next: HttpHandler): 
Observable<HttpEvent<any>> {

    if (req.url.indexOf('/reset_password') > 1 ||
        req.url.indexOf('/login') > 1) {
        return next.handle(req);
    }

    return next.handle(req).pipe(catchError(err => {
        if (err.status === 401) {
            alert("Sesson expired, Please Login again!");
            $('.modal').modal('hide')
            this.AuthService.logout()  
        }

        const error = err.error.message || err.statusText;
        return throwError(error);
    }))
}

我只希望显示一个警报框而不是多个。单击确定后，我要关闭它。

Answer 1

您可以根据要求使用debounce或throttle，这是防抖动的示例实现。

如您所见，它仅触发一次，并且仅在自函数最后一次调用以来的指定时间（以毫秒为单位）之后触发。

function debounce(func, wait) {
    var timeout;
    return function () {
        var context = this, args = arguments;
        var later = function () {
            timeout = null;
            func.apply(context, args);
        };
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
    };
};

const myAlert = debounce((msg) => alert(msg), 1000)

myAlert("alert1");
myAlert("alert2");

如果要保留所有消息而不是仅保留最后一条消息，则可以对其进行一些更改。但是请考虑到我更改了反跳的实现，因此它不再是完全反跳了。

var messages = "";

function debounce(func, wait) {
    var timeout;
    return function () {
        var context = this;
        messages += arguments[0];
        var later = function () {
            timeout = null;
            func.apply(context);
            messages = "";
        };
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
    };
};

const myAlert = debounce(() => alert(messages), 1000)

myAlert("alert1");
myAlert("alert2");

setTimeout(() => {
    // here i wait for another 2000 miliseconds so the function isnt called back to back
    myAlert("alert3");
    myAlert("alert4");
}, 2000);

如何限制打开多个警报背靠背？

1 个答案: