订阅中的角度订阅循环答案

【问题标题】：Angular subscribe loop in subscribe订阅中的角度订阅循环
【发布时间】：2021-01-10 12:00:15
【问题描述】：

我希望检索每个城市的文档。

我有一个通过解析页面来检索城市的第一个 http GET，然后我需要为每个城市发出另一个请求以检索相关文档。

我做了什么

this.httpService.callUrl(ifrUrl).subscribe((html: string) => {
const root = parse(html);
const nodes = root.querySelectorAll(IFR_AIRPORTS_SELECTOR);
const airports = [];
for (const node of nodes) { // Loop for each city
  if (node.childNodes.length === 2) {
    const linkElement = node.childNodes[1];
    // @ts-ignore
    const link = linkElement.attributes.href;
    const airportUrl = this.urlService.getIfrUrlWithEnd(link);
    const airportName = linkElement.innerText.trim().replace('\n', ' ');
    // @ts-ignore
    const icaoSplit = linkElement.attributes.id.toString().split('.');
    const icao = icaoSplit[icaoSplit.length - 1];
    // Retrieve documents associated to the actual airport
    // with an other http request
    this.getIfrChartsForUrl(airportUrl).subscribe((charts) => {
      const airport = new IfrAirport();
      airport.icao = icao;
      airport.name = airportName;
      airport.url = airportUrl;
      airport.charts = charts;
    });
  }
}
console.log('Airports');
console.log(airports);

我对异步函数不是很熟悉。在这里我尝试显示机场，但在使用空机场数组运行脚本后直接显示日志...

应该返回数组构建airports。

我错过了什么？

T H A N K S

【问题讨论】：

标签： angular typescript http ionic-framework subscribe

【解决方案1】：

您可以使用 RxJS 高阶映射运算符（例如 switchMap 来映射一个 observable 和 forkJoin 函数来组合多个 observable，而不是嵌套订阅和循环中的订阅。

试试下面的

this.httpService.callUrl(ifrUrl).pipe(
  switchMap((html: string) => {
    const root = parse(html);
    const nodes = root.querySelectorAll(IFR_AIRPORTS_SELECTOR);
    const requests = [];
    for (const node of nodes) { // Loop for each city
      if (node.childNodes.length === 2) {
        const linkElement = node.childNodes[1];
        // @ts-ignore
        const link = linkElement.attributes.href;
        const airportUrl = this.urlService.getIfrUrlWithEnd(link);
        const airportName = linkElement.innerText.trim().replace('\n', ' ');
        // @ts-ignore
        const icaoSplit = linkElement.attributes.id.toString().split('.');
        const icao = icaoSplit[icaoSplit.length - 1];

        requests.push(
          this.getIfrChartsForUrl(airportUrl).pipe(
            map(charts => {
              const airport = new IfrAirport();
              airport.icao = icao;
              airport.name = airportName;
              airport.url = airportUrl;
              airport.charts = charts;

              return airport;
            })
          )
        );
      }
    }

    return forkJoin(requests);
  })
).subscribe(
  airports => console.log(airports),
  err => console.log(err)
);

【讨论】：