Angular 5中基于RxJS Observable实现可取消请求链的技术咨询

嘿，这个需求刚好能用RxJS的操作符优雅解决！我来给你捋捋具体的实现思路和代码，完全适配你的Angular 5项目：

• 先校验国家数据是否已加载，未加载则发起请求并缓存到模型
• 基于国家ID（如果有）校验州数据，同理缓存
• 最后基于国家+州ID（如果有）校验城市数据，完成缓存
• 用switchMap串联请求链，同时自动取消前一次未完成的请求，完美实现可取消逻辑

首先，假设你已经有了地理数据模型和对应的服务：

// 地理数据模型示例
interface GeographyModel {
  countries?: Country[];
  states?: Record<string, State[]>; // key: countryId
  cities?: Record<string, Record<string, City[]>>; // key: countryId -> stateId
}

// 组件内定义模型和请求订阅变量
private geographyModel: GeographyModel = {};
private currentRequestSubscription: Subscription | null = null;

然后实现changeView方法：

changeView(countryId?: string, stateId?: string, cityId?: string): void {
  // 先取消前一次未完成的请求
  if (this.currentRequestSubscription) {
    this.currentRequestSubscription.unsubscribe();
  }

  // 构建可取消的请求链
  this.currentRequestSubscription = this.checkAndLoadCountries()
    .pipe(
      // 加载完国家后，加载对应州数据
      switchMap(() => this.checkAndLoadStates(countryId)),
      // 加载完州后，加载对应城市数据
      switchMap(() => this.checkAndLoadCities(countryId, stateId)),
      // 全局捕获错误，避免订阅终止
      catchError((error) => {
        console.error('地理数据加载失败:', error);
        // 可以在这里添加用户提示，比如this.toastService.showError('加载失败')
        return EMPTY;
      })
    )
    .subscribe(() => {
      // 所有数据准备就绪后，更新视图
      this.renderView(countryId, stateId, cityId);
    });
}

接下来实现三个校验+加载的私有方法：

1. 校验并加载国家数据 #

private checkAndLoadCountries(): Observable<void> {
  // 如果已有数据，直接返回完成信号
  if (this.geographyModel.countries?.length) {
    return of(void 0);
  }
  // 无数据则发起请求，并存入模型
  return this.geographyService.getCountries()
    .pipe(
      tap((countries) => {
        this.geographyModel.countries = countries;
      })
    );
}

2. 校验并加载州数据 #

private checkAndLoadStates(countryId?: string): Observable<void> {
  // 没有传入国家ID，无需加载
  if (!countryId) {
    return of(void 0);
  }
  // 检查对应国家的州是否已缓存
  const existingStates = this.geographyModel.states?.[countryId];
  if (existingStates?.length) {
    return of(void 0);
  }
  // 发起请求并缓存
  return this.geographyService.getStates(countryId)
    .pipe(
      tap((states) => {
        if (!this.geographyModel.states) {
          this.geographyModel.states = {};
        }
        this.geographyModel.states[countryId] = states;
      })
    );
}

3. 校验并加载城市数据 #

private checkAndLoadCities(countryId?: string, stateId?: string): Observable<void> {
  // 缺少必要ID，无需加载
  if (!countryId || !stateId) {
    return of(void 0);
  }
  // 检查对应城市是否已缓存
  const existingCities = this.geographyModel.cities?.[countryId]?.[stateId];
  if (existingCities?.length) {
    return of(void 0);
  }
  // 发起请求并缓存
  return this.geographyService.getCities(countryId, stateId)
    .pipe(
      tap((cities) => {
        if (!this.geographyModel.cities) {
          this.geographyModel.cities = {};
        }
        if (!this.geographyModel.cities[countryId]) {
          this.geographyModel.cities[countryId] = {};
        }
        this.geographyModel.cities[countryId][stateId] = cities;
      })
    );
}

• 可取消请求：每次调用changeView时，先取消前一次的订阅，再发起新的请求链。同时switchMap会自动取消前一个未完成的Observable，双重保障避免冗余请求。
• 数据缓存：每次请求成功后将数据存入模型，后续调用时直接复用，减少不必要的HTTP请求。
• 可选参数处理：针对可选的countryId、stateId做了边界判断，避免无效请求。

内容的提问来源于stack exchange，提问作者Jyrkka