Angular 7 — вложенные наблюдаемые
У меня есть маршрут Angular, который использует параметр :client_name, и сервис с методом getClientDetails(client_name) для получения данных из HTTP API на основе :client_name. Оба метода Observable работают сами по себе, но когда я объединяю 2 наблюдаемых, вызов API выполняется до того, как параметры будут получены (имя_клиента не определено):
this.route.params.subscribe(params => {
this.client_name = params['client_name'];
this.dataService.getClientDetails(this.client_name).subscribe(
clientdata => {
this.client = clientdata;
console.info(clientdata);
});
Как связать обе наблюдаемые, чтобы API запускался только после возврата :client_name?
@wenjun правильно.
Ok. А что будет, если он не определен? Есть ли какое-то конкретное поведение, которое вы хотите вызвать?
вы можете посмотреть по этой ссылке: stackoverflow.com/questions/40788163/…
@wentjun Вызов API должен выполняться только после разрешения params['client_name'].
Ответы 1
Для этого сценария мы можем использовать конвейерные операторы RxJS.
Во-первых, мы можем использовать карта слияния RxJS для отображения наблюдаемых значений из route во внутреннюю наблюдаемую. Если params и params['client_name'] определены, мы присваиваем params['client_name'] свойству client_name, что аналогично вашему исходному коду. Затем мы вызываем метод getClientDetails() из dataService. Если params не существует, мы конвертируем null в наблюдаемую и возвращаем ее.
Впоследствии наблюдаемые возвращаются в блоке .subscribe(). Оттуда мы можем назначить ответ свойству client.
import { mergeMap } from 'rxjs/operators';
import { of } from 'rxjs';
.
.
this.route.params.pipe(
mergeMap(params => {
if (params && params['client_name']) {
this.client_name = params['client_name'];
return this.dataService.getClientDetails(this.client_name);
} else {
return of(null)
}
})
).subscribe(response => {
// handle the rest
this.client = response;
})
Если я использую следующую, ошибочную и полную структуру, можем ли мы поместить вторую подписку в полный блок, а не mergeMap?
@Bigeyes Хм .. Я бы не рекомендовал вам это делать. Вы можете использовать mergeMap для объединения вложенных операций. Обратный вызов complete следует использовать только для обработки любой логики, касающейся завершения выполнения этого блока кода!
Отлично. На самом деле у меня есть несколько http-запросов, которые должны быть в порядке. Я слышал о Contact в RxJS, можем ли мы использовать его, чтобы связать их вместе?
@Bigeyes mergeMap и concat оба подойдут. В зависимости от конкретного использования вы можете использовать combineLatest или forkJoin too! Если вам все еще нужна помощь с этим, может быть, вы можете дать мне больше информации о точном использовании?
Спасибо за хороший ответ. Например, у меня есть два вызова веб-API. Первый http get. Как только я получу возвращенные данные, я хочу сделать второй http post звонок в службу поддержки. Поэтому я хочу связать их вместе.
@Bigeyes Хм .. В этом случае это действительно зависело бы от деталей. Например, если первый запрос API (с http get) возвращает набор данных, и эти данные необходимы для вызова последующего запроса API (http post), вам нужно будет использовать mergeMap()
Хм... значит, метод
getClientDetailsбудет работать, только еслиparams['client_name']определен?