Блог

Я использую angular, ngrx и rxjs в своем приложении. Когда эффект вызывается дважды, первый http-запрос эффекта отменяется, и учитывается только второй.

Я хочу эмулировать это в функции, которая находится за пределами области действия ngrx.

У меня есть следующий метод :

 checkMissionPoint(
    positions: Array<Cesium.Cartographic>
  ): Observable<{
    valid: boolean;
    response: Array<CheckWaypointResponse>;
  }> {

    return this.store$.pipe(
      select(TransactionsStoreSelectors.selectedTransactionId),
      take(1),
      switchMap((tId) =>
        this.httpClient
          .post<Array<CheckWaypointResponse>>(
            HTTPUtils.getPath(`${environment.FLIGHT_URL}/trajectories/${tId}/checkpoints`),
            {positions}
          )
          .pipe(
            switchMap((result) => {
              return resu<
            })
          )
      )
    );
  }
 

Я вызываю этот метод следующим образом в своем приложении в разных местах приложения

     this.missionHelperService.checkMissionPoint(positions)
 

Теперь я знаю какой-то уродливый способ отменить его, сохранив как ссылку и отписавшись, если метод вызывается снова, а ссылка все еще существует. Но мне интересно, есть ли хороший способ rxjs для достижения этой цели.

Спасибо.

РЕДАКТИРОВАТЬ: я сделал небольшой stackblitz, но вам нужно настроить МЕДЛЕННОЕ 3G-соединение в вашей консоли Chrome https://angular-xm2ixt.stackblitz.io

вы заметите, что obs вызывается дважды, api будет как запускаться, так и отвечать, я хочу, чтобы второй вызов отменял первый (и отправлял сообщение об ошибке тому, кто слушал, и sub 2 будет работать нормально)

У меня была очень похожая ситуация, вот как я ее решил.

 checkMissionPointCalled = new EventEmitter<void>();

checkMissionPoint(
    positions: Array<Cesium.Cartographic>
): Observable<{
    valid: boolean;
    response: Array<CheckWaypointResponse>;
}> {
    this.checkMissionPointCalled.emit();
    return this.store$.pipe(
        select(TransactionsStoreSelectors.selectedTransactionId),
        take(1),
        switchMap((tId) =>
            this.httpClient
                .post<Array<CheckWaypointResponse>>(
                     HTTPUtils.getPath(`${environment.FLIGHT_URL}/trajectories/${tId}/checkpoints`),
                        { positions }
                )
         ),
        takeUntil(this.checkMissionPointCalled)
    );
}
 

Однако я не смог использовать

          .pipe(
            switchMap((result) => {
              return resu<
            })
          )
 

после httpClient.post вызова, я думаю, вероятно, это была ошибка. Итак, я не включил его в свой ответ.

Вероятно, вы также захотите закрыть checkMissionPointCalled ngOnDestroy метод.

Проблема, с которой вы столкнулись сейчас, заключается в том, что checkMissionPoint() метод возвращает совершенно новый наблюдаемый объект для каждого вызывающего.

Я думаю, вы могли бы добиться того, что пытаетесь сделать, если бы у вас был частный наблюдаемый объект и возвращал тот же наблюдаемый объект всем вызывающим. Это наблюдаемое значение будет использоваться switchMap() для достижения требуемого поведения отмены.

 private positions$ = new Subject();
private uri$ = this.store$.pipe(
    select(TransactionsStoreSelectors.selectedTransactionId),
    map(tId => HTTPUtils.getPath(`${environment.FLIGHT_URL}/trajectories/${tId}/checkpoints`)
);
private checkMissionPoint$ = combineLatest([this.uri$, this.positions$]).pipe(
    switchMap(([uri, positions]) => this.httpClient.post<CheckWaypointResponse[]>(uri, {positions}))
);

checkMissionPoint(
    positions: Array<Cesium.Cartographic>
  ): Observable<{
    valid: boolean;
    response: Array<CheckWaypointResponse>;
  }> {
    this.positions.next(positions);

    return this.checkMissionPoint$.pipe(
      take(1)
    );
}
 

В зависимости от вашего варианта использования, может быть более чистым вернуть метод void и сделать общедоступным общий наблюдаемый:

 private positions$ = new Subject();
private uri$ = this.store$.pipe(
    select(TransactionsStoreSelectors.selectedTransactionId),
    map(tId => HTTPUtils.getPath(`${environment.FLIGHT_URL}/trajectories/${tId}/checkpoints`)
);
public missionPoint$ = combineLatest([this.uri$, this.positions$]).pipe(
    switchMap(([uri, positions]) => this.httpClient.post<CheckWaypointResponse[]>(uri, {positions}))
);

setPosition(
    positions: Array<Cesium.Cartographic>
  ): Observable<{
    valid: boolean;
    response: Array<CheckWaypointResponse>;
  }> {
    this.positions.next(positions);
}