Отменить наблюдаемую цепочку вызовов flatMap

Question

Я использую угловые 5 и rxjs.Я делаю 2 сервисных звонка, один зависит от других результатов.Я делаю это с помощью flatMap.Я также использую takeUntil, чтобы я мог прервать работу в любой точке.Мой код выглядит следующим образом:

this.myservice.api1(param1).pipe(takeUntil(this.destroyed$), finalize(() => {
//do something after both api calls are completed
},
flatMap((result1) => {
    //do some operation and create object x(this.objx)
    return this.myservice.api2(param1);
})
).subscribe((result2) => {
    //do something based on result2 and this.objx
})

Этот код выполняется в цикле for, а цикл выполняется 200 раз.Поэтому совершено 400 сетевых звонков.У меня есть кнопка на пользовательском интерфейсе, чтобы прервать эту операцию, и this.destroyed $ observable выполняется при нажатии.Я могу прервать этот способ для любой итерации, когда второй вызов API не сделан (api2).Если вызывается только первый API, этот запрос отменяется.Если был вызван api2, для ответа на который требуется 20-30 секунд, он не отменяется.Я хочу, чтобы оба вызова API были отменены.Возможно ли это?

Answer 1

Вы можете просто реструктурировать свою цепочку и поставить takeUntil в конце.

this.myservice.api1(param1).pipe(
  mergeMap((result1) => { // flatMap is just alias for `mergeMap` which is the recommended name you should use
    //do some operation and create object x(this.objx)
    return this.myservice.api2(param1);
  }),
  takeUntil(this.destroyed$),
  finalize(() => {
    //do something after both api calls are completed
  },
).subscribe((result2) => {
  //do something based on result2 and this.objx
});

Ваша проблема заключается в том, как mergeMap работает внутри (это специально).mergeMap объединяет свой источник Observable и все внутренние Observables.Поэтому, если вы поставите takeUntil перед mergeMap, вы просто завершите исходную Наблюдаемую, в то время как все внутренние Наблюдаемые все еще активны.

Если вы установите ее после mergeMap, это заставит наблюдателя завершить, какие триггерыраспоряжаться обработчиками снизу вверх, и когда mergeMap отписывается, он отписывается от своих внутренних Observables.

Это соответствующая строка: https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/mergeMap.ts#L147

Также посмотрите на эту статью от одногоразработчиков ядра RxJS: https://blog.angularindepth.com/rxjs-avoiding-takeuntil-leaks-fb5182d047ef