Question

我对Angular异步管道的理解是，它在HTML模板中为您订阅了一个公开的Observable。 E.G

组件

export class TestComponent {
    let todos$: Observable<Array<Todo>>;

    constructor(private http: HttpClient) {}

    ngOnInit() {
        this.todos$ = this.http.get<Array<Todos>>(...)
    }
}

模板

<div *ngFor="let todo of todos$ | async">
    {{ todo }}
</div>

我的理解是HttpClient Observable将发出以下成功事件：

next(value)
completed

出现错误

error(error)
completed

当可观察对象发出已完成事件时，订阅将关闭。

因此，如果您订阅了像Angulars HttpClient Observable这样的冷可观察对象，您如何重试HttpClient请求？

异步操作符会进行初始订阅，但是一旦冷观察完成，它将被关闭，如果要再次执行异步调用符，如何让它重新订阅？例如，如果您想刷新数据。

Answer 1

只需重新分配待办事项$，这将再次触发http请求

组件

export class TestComponent {
    public todos$: Observable<Array<Todo>>;

    constructor(private http: HttpClient) {}

    ngOnInit() {
     this.getTodos();
    }

    getTodos(){
        this.todos$ = this.http.get<Array<Todos>>(...);
    }
}

模板

<button (click)="getTodos()" >Refresh ?</button>

demo ?

Answer 2

您有一个retry和retryWhen运算符。和他们一起玩：）

https://rxjs-dev.firebaseapp.com/api/operators/retry

https://rxjs-dev.firebaseapp.com/api/operators/retryWhen

@edit

要成功刷新数据，您可以这样做：


export class TestComponent {
    refresh$ = new BehaviorSubject(true);
    todos$: Observable<Array<Todo>>;

    constructor(private http: HttpClient) {}

    ngOnInit() {
        this.todos$ = this.refresh$
            .pipe(
                 switchMap(() => this.http.get<Array<Todos>>(...))
            )
    }

    refreshData() {
        this.refresh$.next();
    }
}

Angular异步管道重新订阅

2 个答案: