Angular: Как показать что-то на медленном HTTP-ответе - PullRequest
Новая
       107

Angular: Как показать что-то на медленном HTTP-ответе

1 голос
/ 11 декабря 2019

В моих угловых приложениях я хочу показать текст / модал, которые имеют кнопки cancel и reload , когда сервер реагирует медленно.

Если пользователь нажмет кнопку «Отмена», текущий запрос http будет отменен. Если пользователь щелкнет по перезагрузке, текущий HTTP-запрос будет повторен. Если текст / модал уже показан и HTTP-запрос уже отвечает / завершен, то текст / модал должен исчезнуть.

У меня есть идея с использованием перехватчика HTTP, RxJS и глобального сервиса, но его реализация не таковалегко.

Есть ли у кого-нибудь идея, как сделать это правильно?

РЕДАКТИРОВАТЬ: О, и я хочу сделать его универсальным модулем, чтобы каждый http-запрос можно было отменить или перезагрузить. Таким образом, каждая страница может иметь эту функцию

Ответы [ 2 ]

0 голосов
/ 11 декабря 2019

Отмена / отмена всех ожидающих HTTP-запросов с помощью takeUntil

Вы можете использовать takeUntil, чтобы остановить текущий запрос, потому что запрос от HttpClient возвращает наблюдаемую, вы можете сделать это довольно легко:

TS 

userStop$: Subject<boolean> = new Subject<boolean>();

makeRequest() {
    this.userStop$.next(false);
    // Service Call
    this.apiService.makeRequest().pipe(
        takeUntil(this.userStop$)
    ).subscribe(...);
}

handleUserStop() {
    this.userStop$.next(true);
}

Когда вы изменяете userStop$ на true, например, нажатием кнопки, он останавливается. Чтобы повторить попытку, вы можете просто вызвать метод обслуживания и установить для userStop$ значение false;

Если вы хотите повторить запрос после его сбоя, вы можете использовать retry(x). 

this.apiService.makeRequest().pipe(
    //retry 2 times on error
    retry(2)
).subscribe(...);

Вы также можете оформить заказ: Как отменить / отписаться от всех ожидающих запросов HTTP угловой 4 +

Для получения дополнительной информации: https://www.learnrxjs.io/operators/filtering/takeuntil.html

0 голосов
/ 11 декабря 2019

Предположим, что ваш запрос займет 20 секунд, чтобы завершить ответ, затем вы сможете отменить его в течение 20 секунд

Просто UnSubscription Этот запрос 

import { Component, OnInit, OnDestroy } from '@angular/core';
    import { Subscription } from 'rxjs/Rx';

    export class Component implements OnInit, OnDestroy {
        private subscription: Subscription;
        ngOnInit() {
            this.subscription = this.route.params.subscribe();
        }
        ngOnDestroy() {
            this.subscription.unsubscribe();
        }



     cancel() {
            this.subscription.unsubscribe();
        }

    retry() {
            this.subscription.subscribe();
        }



    }

html Вы можете всплывающее окно, когда или в любом месте, какая кнопка, когда вы делаете HTTP-запрос, чтобы отменить его 

     <div> {{ subscription | async }}</div>
.
.
.Enter your other logic
.


    <button (click)=="cancel()" > Cancel Request</button>
    <button (click)=="retry()" > Cancel retry</button>
...