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

Question

我正在尝试创建一个角度应用程序，该应用程序可以基于可观察对象，根据用户从下拉菜单中选择的选项发送多个HTTP请求。 我在网上检查过，但无法完全理解这些概念。 我无法使用switchMap operator来实现我的目标。

任何人都可以看看并指出我的错误。

任何建议/帮助将不胜感激。

谢谢。

.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
}

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

Answer 1

switchMap将一个可观察者更改为另一个。 看到

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);
        })
  }