Как реализовать функцию ручного повтора в angular7 для всех запросов HTTP, которые не отвечают в течение определенного времени - PullRequest
Новая
       23

Как реализовать функцию ручного повтора в angular7 для всех запросов HTTP, которые не отвечают в течение определенного времени

0 голосов
/ 21 июня 2019

У меня есть угловое приложение, которое имеет много http-вызовов, мы реализовали и http-перехватчик ошибок, где мы проверяем, если какой-либо запрос не отвечает через определенное время, мы показываем диалоговое окно с пользовательским сообщением, и запрос вызываетсяснова методом повтора.Но я хочу предоставить пользователю кнопку, нажав на этого пользователя, можно повторить попытку повторного вызова, если он этого захочет. 

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    let count = 0;
    console.log('----in intercept---');
    this.timeoutRes = this.preLoadDataService.getTimeOutData();
    this.timeoutVal = this.getKeyByValue(this.timeoutRes, request.url);
    console.log('request: ' + request.url);
    console.log('timeout val: ', this.timeoutVal);
    console.log(request);
    if (this.timeoutVal) {
        return next.handle(request).pipe(timeout(parseInt(this.timeoutVal) * 1000),
            retryWhen(err => {
                console.log(err);
                return err
                    .pipe(flatMap((err) => {
                        if (err.status === 401) {
                            this.loader.hide();
                            /* auto logout if 401 response returned from api */
                            this.authenticationService.logout();
                            this.dialogRef.closeAll();
                        } else if (err.name == 'TimeoutError') {
                            count++;
                            this.loader.hide();
                            const dialog = this.dialogRef.open(AppErrorModalComponent, { width: '420px', minHeight: '150px', data: { timeInSecs: 5000, count: count }, disableClose: true });
                            return of(err);
                        }
                    }), delay(5000), take(3)
                    );
            }),
            catchError(err => {
                if (err.status !== 400 && err.status !== 401) {
                    const dialog = this.dialogRef.open(AppErrorModalComponent, { width: '420px', minHeight: '150px', data: { request: request }, disableClose: true });
                    console.log(dialog);
                    //add retry button suscription here
                }
                const error = err.message || err.statusText;
                return throwError(error);
            }));
    } else {
        return next.handle(request).pipe(catchError(err => {
            console.log(err);
            if (err.status === 401) {
                /* auto logout if 401 response returned from api */
                this.authenticationService.logout();
                this.dialogRef.closeAll();
                // location.reload(false);
            } else if (err.status !== 400 && err.status !== 401) {
                const dialog = this.dialogRef.open(AppErrorModalComponent, { width: '420px', minHeight: '150px', data: {}, disableClose: true });
            }
            const error = err.message || err.statusText;
            return throwError(error);
        }));
    }
}

Пользователь должен получить сообщение типа «Запросить это, хотите повторить попытку?».?и кнопку для нажатия.

...