Angular 如何使用单个Observable发送多个Http请求

我正在尝试创建一个angular应用程序，该应用程序可以根据用户从中选择的选项，使用Observable发送多个HTTP请求。我在网上查了一下，但不能完全理解这些概念。我无法使用

switchMap操作符

来实现我的目标

谁能看一下并指出我的错误吗

如有任何建议/帮助，将不胜感激

谢谢

.component.ts文件：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Location } from '@angular/common';

// Router Module for Application level Route
import { Router, ActivatedRoute } from '@angular/router';

//importing route code
import { CountryLanguageService } from '../country-language.service';
import { CountryLanguageHttpService } from '../country-language-http.service';


//importing observables related code
import { Observable, pipe } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { tap } from 'rxjs/operators';
import { delay } from 'rxjs/operators';
import { switchMap } from 'rxjs/operators';


@Component({
  selector: 'app-language',
  templateUrl: './language.component.html',
  styleUrls: ['./language.component.css']
})
export class LanguageComponent implements OnInit, OnDestroy {

  public allSameLanguagesCountries;
  public selectedCode;

  constructor(private countryLanguageHttpService: CountryLanguageHttpService, private _route: ActivatedRoute, private location: Location) {

    console.log("Languages Component Called");
  }

  backClicked() {
    this.location.back();
  }


  ngOnInit() {

    // method to get all same language speaking countries

    this._route.params
    .pipe(switchMap(params => this.selectedCode = params['code']));
    console.log(this.selectedCode);
    this.allSameLanguagesCountries = this.countryLanguageHttpService.getAllSameLanguagesCountries(this.selectedCode)
      .subscribe(
        data => {
          console.log(data);
          this.allSameLanguagesCountries = data;

        },
        error => {
          console.log("Some Error Occurred");
          console.log(error.errorMessage);
        }
      )
  }

  ngOnDestroy() {
    console.log("Language Component Destroyed");
  }
}

.http-service.ts文件：

import { Injectable } from '@angular/core';

//importing Http Client to make the request
import { HttpClient, HttpErrorResponse } from '@angular/common/http';

// Router Module for Application level Route
import { Router, ActivatedRoute } from '@angular/router';

//importing observables related code
import { Observable, pipe } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { tap } from 'rxjs/operators';
import { delay } from 'rxjs/operators';
import { switchMap } from 'rxjs/operators';


@Injectable({
  providedIn: 'root'
})


export class CountryLanguageHttpService {

  public currentLanguageCode;

  public baseUrl = 'https://restcountries.eu/rest/v2/lang/';

  constructor(private _http: HttpClient) { 
    console.log("Country Language View Service Called");

  }

  // Exception Handler
  private handleError(err: HttpErrorResponse) {
    console.log("Handle error Http calls")
    console.log(err.message);
    return Observable.throw(err.message);
  }


  // method to return single country Informations
  public getAllSameLanguagesCountries(currentLanguageCode): any {

    let myResponse = this._http.get(this.baseUrl + currentLanguageCode);
    console.log(myResponse);
    return myResponse;
  } // end get country info function
}

---

是我在控制台中遇到的错误。

切换映射将一个可观察对象更改为另一个。看

ngOnInit() {
    this._route.params
      .pipe(switchMap(params => 
        {
           //We don't want return the params
           this.selectedCode = params['code']);
           //we want return the countries
           return this.countryLanguageHttpService.getAllSameLanguagesCountries(this.selectedCode)
        }))
      .subscribe(
        data => {
          console.log(data);
          this.allSameLanguagesCountries = data;
        },
        error => {
          console.log("Some Error Occurred");
          console.log(error.errorMessage);
        })
  }

---

切换映射将一个可观察对象更改为另一个。看

ngOnInit() {
    this._route.params
      .pipe(switchMap(params => 
        {
           //We don't want return the params
           this.selectedCode = params['code']);
           //we want return the countries
           return this.countryLanguageHttpService.getAllSameLanguagesCountries(this.selectedCode)
        }))
      .subscribe(
        data => {
          console.log(data);
          this.allSameLanguagesCountries = data;
        },
        error => {
          console.log("Some Error Occurred");
          console.log(error.errorMessage);
        })
  }

---

我在调用

v2/lang/undefined

时看到404错误。这就是您所指的吗？Ankit:是的，我也不知道如何使用switchMap操作符发出请求。

switchMap

应返回一个

可观察的
，否则使用
map
，则会出现错误，因为找不到您的web端点。然而，如果我们谈论
rxjs
的
switchMap
操作符，那么它不会对后端进行任何调用。它只是切换到一个新的可观察对象，并以所需的格式映射响应。此外，它对API具有抵消作用。也就是说，如果两次命中同一个端点，后者首先带来响应，而后者带来响应，那么您将处理来自前一个web调用的响应。使用swicthMap会取消以前的任何可观察到的内容。因此，您总是在使用最新的web调用。有关
switchMap
的更多信息，请参阅。调用
v2/lang/undefined
时，我可能会看到404错误。这就是您所指的吗？Ankit:是的，我也不知道如何使用switchMap操作符发出请求。
switchMap
应返回一个
可观察的
，否则使用
map
，则会出现错误，因为找不到您的web端点。然而，如果我们谈论
rxjs
的
switchMap
操作符，那么它不会对后端进行任何调用。它只是切换到一个新的可观察对象，并以所需的格式映射响应。此外，它对API具有抵消作用。也就是说，如果两次命中同一个端点，后者首先带来响应，而后者带来响应，那么您将处理来自前一个web调用的响应。使用swicthMap会取消以前的任何可观察到的内容。因此，您总是在使用最新的web调用。有关
switchMap
的更多信息，请参阅。