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

Question

我正在尝试创建一个 angular 应用程序，它可以根据用户从 drop-down 中选择的选项使用可观察对象发送多个 HTTP 请求。我在网上查过，但无法完全理解这些概念。我无法使用 switchMap operator 来实现我的目标。

谁能看看并指出我的错误。

任何suggestions/help将不胜感激。

谢谢。

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

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

Answer 1

switchMap 将一个 observable 更改为另一个。见

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

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

How to send multiple Http request using single Observable

rxjs

angular

rxjs-pipeable-operators