Рецепт Angular RxJS для отмены предыдущего http-запроса
У меня есть служба Angular, где, когда я выбираю новый элемент, я устанавливаю этот идентификатор элемента в своем сервисе и использую его для выполнения нескольких дополнительных вызовов для ПОЛУЧЕНИЯ подчастей элемента. Код выглядит так
set item(myItem: Item) {
this._item = item;
this.selectedItemUpdate.next(this._item);
this.getItemSubPartOne(this._item.id);
this.getItemSubPartTwo(this._item.id);
this.getItemSubPartThree(this._item.id);
}
......
getItemSubPartOne(id: string) {
let url = ...
this.httpClient.get(url).subscribe(
(res:Result) => {
this.itemSubPartOneUpdate.next(res);
}
}
Учитывая этот шаблон, что мне нужно сделать, чтобы восстановить его в случае, если одна из подчастей не вернулась, но пользователь выбрал другой элемент. Мне нужно будет отменить все предыдущие http-запросы.
Ответы 1
Вы можете легко объявить три наблюдаемых объекта, которые начинаются с выброса выбранного элемента, а затем возвращают соответствующие данные подчасти. Для этого не нужны отдельные Предметы.
itemSubPart1$ = this.selectedItem$.pipe(
switchMap(item => this.httpClient.get(`/item/${item.id}/sub-part-1`))
);
С помощью приведенного выше кода мы объявляем itemSubPart1$ наблюдаемым объектом, который будет выдавать значение вызова http get каждый раз, когда selectedItem$ выдает значение. switchMap имеет функцию отмены текущего вызова при получении новой эмиссии.
Вы просто объявите два других наблюдаемых объекта точно так же, указав их соответствующие URL-адреса.
В идеале установщик должен только передавать значение через наблюдаемую и не выполнять никакой другой работы:
set item(myItem: Item) {
this.selectedItem$.next(item);
}
Вместо использования this._item вы можете использовать канал async, чтобы избежать необходимости явно подписываться:
<pre *ngIf = "selectedItem$ | async as item">{{ item | json }}</pre>