取消之前的 http 请求并使用 async 运行新的答案

【问题标题】：Cancel previous http request and run the new one using async取消之前的 http 请求并使用 async 运行新的
【发布时间】：2019-09-29 01:31:55
【问题描述】：

我的组件显示选定的建筑细节以及建筑的建筑单元（公寓）列表。这是一个组件 html：

    <div *ngIf="$building | async as building">
      ...
      <div *ngIf="$buildingUnits | async as buildingUnits">
        ...
      </div>
    </div>

这是一个组件控制器：

    @Component({
      selector: 'building-dashboard',
      templateUrl: './building-dashboard.component.html',
      styleUrls: ['./building-dashboard.component.scss']
    })
    export class BuildingDashboardComponent implements OnInit {
      private buildingId: number;
      private $building: Observable<Building>;
      private $buildingUnits: Observable<BuildingUnit[]>;

      ngOnInit() {
        this.$building = this.route.paramMap.pipe(
          tap((params: ParamMap) => {
            this.buildingId = Number(params.get('id'));
          }),
          switchMap((params: ParamMap) => {
            return this.buildingService.getBuilding(this.buildingId);
          })
        );

        this.$buildingUnits = this.route.paramMap.pipe(
          switchMap((params: ParamMap) => {
            let buildingId = Number(params.get('id'));
            return this.buildingUnitsService.getBuildingUnits(buildingId);
          })
        );
      }

      reloadBuildingUnits() {
        this.$buildingUnits = this.buildingUnitsService.getBuildingUnits(this.buildingId);
      }
    }

建筑物的ID是从路线参数中获得的。当建筑物的 ID 发生变化时，我需要重新加载建筑物的详细信息和 buildingUnits 列表。有一个方法 reloadBuildingUnits() 可以由用户通过单击按钮来激活。在这种情况下，我需要重新加载 buildingUnits 列表并取消之前的 http 请求（如果它尚未完成）。我不知道该怎么做。可能我应该在控制器中订阅然后取消订阅而不是使用异步？使用 promise 而不是 observable 会更好吗？我是 Angular 的新手，我会感谢任何改进建议。我正在使用 Angular 7.2.0 和 rxjs 6.3.3。

【问题讨论】：

标签： angular rxjs angular7 rxjs6

【解决方案1】：

按钮点击可观察发射和路由器参数可观察发射与combinelatest运算符绑定，因此每当路由器参数更改或按钮点击操作执行switchmap将取消之前的http请求并触发新的http请求。

export class BuildingDashboardComponent  implements OnInit {

    private buildingId: number;
    private $building: Observable<Building>;
    private $buildingUnits: Observable<BuildingUnit[]>;
    reloadClick$ = new BehaviorSubject<any>('initValue');

    constructor(
        private buildingService: ExchangeService,
        private route: ActivatedRoute) { }

    ngOnInit() {
        this.$building = this.route.paramMap.pipe(
            tap((params: ParamMap) => this.buildingId = Number(params.get('id'))),
            switchMap((params: ParamMap) => this.buildingService.getBuilding(this.buildingId))
        );

        this.$buildingUnits = this.route.paramMap.pipe(combineLatest(this.reloadClick$)).pipe(
            switchMap(([params, _]) => this.buildingService.getBuildingUnits(Number(params.get('id'))))
        );

    }

    reloadBuildingUnits() {
        this.reloadClick$.next('reloadClick');
    }
}

【讨论】：