Angular自帶有http模塊可以方便的進(jìn)行Http請(qǐng)求。不必像Vue那樣安裝配置axios。

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: 'app/app.component.html'
})
export class AppComponent {

  constructor(private http: HttpClient) { }
  
  ngOnInit() {
    // 發(fā)起一個(gè)get請(qǐng)求
    this.http.get('/api/people/1').subscribe(json => console.log(json));
  }
}

注意：上面的this.http.get... 處理HTTP最好放到單獨(dú)的Service文件中，再注入到Component。這里為了演示沒有這么做。

優(yōu)化有順序依賴的多個(gè)請(qǐng)求

有些時(shí)候我們需要按順序發(fā)起多個(gè)請(qǐng)求，根據(jù)第一個(gè)請(qǐng)求返回的結(jié)果中的某些內(nèi)容，作為第二個(gè)請(qǐng)求的參數(shù)，比如下面代碼。

  ngOnInit() {
    this.http.get('/api/people/1').subscribe(character => {
      this.http.get(character.homeworld).subscribe(homeworld => {
        character.homeworld = homeworld;
        this.loadedCharacter = character;
      });
    });
  }

上面的嵌套寫法可讀性不那么好，我們可以使用RxJS提供的mergeMap操作符來(lái)優(yōu)化上述代碼

import { Component } from '@angular/core';
import { Http } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import { mergeMap } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  templateUrl: 'app/app.component.html'
})
export class AppComponent {
  homeworld: Observable<{}>;
  constructor(private http: HttpClient) { }
  
  ngOnInit() {
    this.homeworld = this.http.get('/api/people/1')
    .pipe(
      mergeMap(character => this.http.get(character.homeworld))
    );
  }
}

mergeMap 操作符用于從內(nèi)部的 Observable 對(duì)象中獲取值，然后返回給父級(jí)流對(duì)象。
可以合并 Observable 對(duì)象

處理并發(fā)請(qǐng)求

forkJoin 是 Rx 版本的 Promise.all()，即表示等到所有的 Observable 都完成后，才一次性返回值。

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { forkJoin } from "rxjs/observable/forkJoin";

@Component({
  selector: 'app-root',
  templateUrl: 'app/app.component.html'
})
export class AppComponent {
  loadedCharacter: {};
  constructor(private http: HttpClient) { }
  
  ngOnInit() {
    let character = this.http.get('https://swapi.co/api/people/1');
    let characterHomeworld = this.http.get('http://swapi.co/api/planets/1');

    forkJoin([character, characterHomeworld]).subscribe(results => {
      // results[0] is our character
      // results[1] is our character homeworld
      results[0].homeworld = results[1];
      this.loadedCharacter = results[0];
    });
  }
}

在線演示

錯(cuò)誤處理請(qǐng)求

使用 catchError 處理observable中的錯(cuò)誤，需要返回一個(gè)新的 observable 或者直接拋出error

例1 ，在請(qǐng)求方法內(nèi)部處理錯(cuò)誤，若請(qǐng)求失敗返回一個(gè)默認(rèn)值，看起來(lái)用戶也感知不到發(fā)生了錯(cuò)誤

  // http.service.ts
  getPostDetail(id) {
    return this.http
    .get<any>(`https://jsonplaceholder.typicode.com/posts/${id}`)
      .pipe(
        // catchError 需要 returning a new observable or throwing an error.
        catchError(err => {
          // 如果發(fā)生錯(cuò)誤，用缺省值，(嘗試修改為錯(cuò)誤地址)
          return of({
            userId: 1,
            id: 1,
            title: '-occaecati excepturi optio reprehenderit-',
            body: '-eveniet architecto-'
          });
        })
    )
  }
  // component 中調(diào)用
  getPostDetail() {
    this.postDetail$ = this.service.getPostDetail(1)
    .subscribe(val => {
      console.log(val);
    });
  }

例2 直接把錯(cuò)誤拋出來(lái)，在外部處理錯(cuò)誤，比如來(lái)個(gè)彈窗，提示告訴用戶

  getPostDetail(id) {
    return this.http
    .get<any>(`${this.endpoint}/posts2/${id}`)
      .pipe(
        // catchError  returning a new observable or throwing an error.
        catchError(err => {
          throw err;
        })
      )
  }

// 改造調(diào)用方法
  getPostDetail() {
    this.postDetail$ = this.service.getPostDetail(1)
      .subscribe(
        (next) => {
        },  
       // 這里接收內(nèi)部拋出的錯(cuò)誤
        err => {
          // 可以加入自己的錯(cuò)誤處理邏輯，搞個(gè)彈窗，notify等
          console.log(err);
        }
      )
  }

參考

使用 RxJS 處理多個(gè) Http 請(qǐng)求