Как избежать вложенных вызовов subcribe () в RxJs 6

Question

Иногда мне нужно значение из предыдущего наблюдаемого и запускать другую функцию, которая зависит от этого значения и так далее.Это делает вложенные вызовы subcribe (), а затем код становится очень уродливым и неуправляемым.У меня есть пример:

getObservableData().subcribe(next=>
    let dialogRef=this.dialog.open(EvalListComponent, {data: next})
    dialogRef.afterClosed().subscribe(next=>{
        let k=dialogRef.componentInstance.getAnotherObservableData()
            .subcribe( next=> doSomthing(next))
}))

Какое решение может иметь такую ​​ситуацию.Мне нужна какая-то уплощенная структура.Я знаю, что есть функция канала и ее можно использовать с операторами rxjs.Но как этого достичь?

Answer 1

Я рекомендую эту статью: Изучите стратегии выравнивания .

TLDR: используйте операторы карты, такие как: mergeMap, switchMap, concatMap, exhaustMap.

Все они в основном работают одинаково -

1. Они отображают некоторое значение в наблюдаемое (вы отвечаете за возвращение наблюдаемого значения из них,они просто отображают это)

2. Они сглаживают наблюдаемое вами возвращаемое (они просто подписываются на него)

3. Они решают, что делать до /после того, как они сгладятся («Стратегия сглаживания»)

Вам остается только решить, какая стратегия полезна для вашего примера.Прочитав статью, вы легко сможете ее понять.

Answer 2

Я бы посоветовал взглянуть на MergeMap и / или SwitchMap.SwitchMap может использоваться для завершения одного асинхронного вызова, определения его успешного завершения и последующего выполнения другого асинхронного вызова с этими данными.

return getObservableData()
.switchMap(next => {
    return let dialogRef = this.dialog.open(EvalListComponent, {data: next}
})
.catch(error => {
    return Observable.of(...)
}
.switchMap(x => {
        ...
})
.catch( ...and so on and so on...)

Answer 3

Обычно я предпочитаю создавать Subject во время выполнения асинхронной операции и прослушивания изменений.

например:
`` `

private dialogActionSubject: Subject<string>;

public onAlertActionBtnClicked(data): void {
    this.dialogActionSubject.next(data);
}

const subs = this.dialogActionSubject
    .pipe(
        distinctUntilChanged()
    )
   .subscribe(action => {});

` ``