Question

所以，我试图绕过rxjs/observable，在我的测试用例研究中，我正在尝试构建一个简单的基于角度（5）的网络应用程序，它应该显示一些关于地理实体的统计数据，即国家，州，城市。所以我创建了changeView方法，它接受了三个参数（两个可选）和各自的ID 一开始我想要应用程序最初检查我的模型是否已加载国家/地区数据，如果没有则查询数据，将检索到的数据保存在模型中，然后检查stateId是否已指定并且包含在country.states数组中然后检查是否已加载，如果不是查询状态等等，直到检索到所有数据，或者用户已更改输入参数，在这种情况下所有正在进行的请求应该停止（据我所知，这部分由switchMap运营商完成），新的请求应该开始。几天后我才明白这太复杂了，所以我改变了计划，决定只在最后将数据存储到模型中。它看起来像我想要的那样，但是子顺序请求没有被取消。以下是我目前所拥有的摘录：

of({countryId: 1, stateId: 1, cityId: 1}).pipe(
  debounceTime(500),
  switchMap(newState => {
    if ((newState !== null))
    {
     return this.geoStatsService.getCountry(newState.countryId);
    }
    else
    {
     return empty();
    }
  }, (outerValue, innerValue) => {
    if ("stateId" in outerValue && outerValue.stateId !== undefined)
    {
     // ToDo: Check that state is located in this county
     return forkJoin(of(innerValue), this.geoStatsService.getStates(outerValue.stateId));
    }
    else
    {
     return of(innerValue);
    }
  }),
  mergeAll()
  ).subscribe(res => {
     console.debug("---Subscription---");
     console.debug(res);
  });

我已经看到，一旦第二个请求被触发，它就不会被取消，数据将进入订阅状态......在我看来，我已经过度复杂了，它可以完成以更优雅的方式，也将按照我的意图工作，是这样吗？附加问题：我可以，或更精确的问题 - 我应该从流程中提取数据，还是仅从订阅方法中提取数据？

Answer 1

嗯......鉴于国家/州/城市可能都需要加载，在我看来，你需要的是3个嵌套的switchMaps，如下所示：

interface Query { countryId: number; stateId?: number; cityId?: number }

// keep a cache to avoid reloading
const countryCache = new Map<number, Country>();
const stateCache = new Map<number, State>();
const cityCache = new Map<number, City>();

const query$: Observable<Query> = of({countryId: 1, stateId: 1, cityId: 1});

query$.pipe(
  debounceTime(500),
  switchMap((q: Query) => {
    if (!q || q.countryId === undefined) {
      return of([]);
    }

    // get country from cache or load from backend
    const country$ = countryCache.has(q.countryId) ?
      of(countryCache.get(q.countryId)) :
      this.geoStatsService.getCountry(q.countryId).do(country => {
        countryCache.set(q.countryId, country);
      });

    return country$.pipe(
      switchMap(country => {
        if (!country || !country.states.includes(q.stateId)) {
          return of([country]);
        }

        // get state from cache or load from backend
        const state$ = stateCache.has(q.stateId) ?
          of(stateCache.get(q.stateId)) :
          this.geoStatsService.getState(q.stateId).do(state => {
            stateCache.set(q.stateId, state);
          });

        return state$.pipe(
          switchMap(state => {
            if (!state || !state.cities.includes(q.cityId)) {
              return of([country, state]);
            }

            // get city from cache or load from backend
            const city$ = cityCache.has(q.cityId) ?
              of(cityCache.get(q.cityId)) :
              this.geoStatsService.getCity(q.cityId).do(city => {
                cityCache.set(q.cityId, city);
              });

            return city$.map(city => [country, state, city]);
          })
        );
      })
    );
  })
).subscribe(([country, state, city]) => {
  // ...
});

Answer 2

尝试使用“flatMap”代替“switchMap”， switchMap有自己的取消系统，这就是为什么有时你不会得到订阅。

https://www.learnrxjs.io/operators/transformation/switchmap.html

顺便说一句，你必须订阅，否则代码将无法运行。

可取消的请求链

2 个答案: