Angular 5 – HttpClient

Przy okazji aktualizacji Angulara do wersji 5, zobaczyłam, że są dostępne nowe, zaktualizowane pakiety. Na początek skupiłam się na HttpClientModule, czyli ulepszonej wesji HttpModule. Poniżej przedstawiam rezultaty zmiany modułu http, czyli po kolei sposób aktualizacji serwisów i komponentów.

Aktualizacja serwisów

Stara wersja serwisu:

import { Headers, Http } from "@angular/http";
import "rxjs/add/operator/toPromise";
import { BoardGame } from "./BoardGame";

export class BoardGameService {
	private headers = new Headers({ "Content-Type": "application/json" });

	constructor(private http: Http) {}

	//GET
	getBoardGames(): Promise {
		const url = `BoardGame/GetAll`;
		return this.http.get(url)
		.toPromise()
		.then(response => {
			return response.json() as BoardGame[];
		})
		.catch(err => { return Promise.reject(err); });
     }

	 //POST
	 update(boardGame: BoardGame): Promise {
		const url = `BoardGame/Edit`;
		return this.http
			.post(url, JSON.stringify(boardGame), { headers: this.headers })
			.toPromise()
			.then(response => { return response.text(); })
			.catch(err => { return Promise.reject(err); });
     }
}

Nowa wersja serwisu:

import { HttpClient } from "@angular/common/http";
import { Observable } from "rxjs/Observable";
import { BoardGame } from "./BoardGame";

export class BoardGameService {
	private headers: new HttpHeaders({
		'Content-Type': 'application/json'
	})

	constructor(private http: Http) {}

	//GET
	getBoardGames(): Observable {
		const url = `BoardGame/GetAll`;
		return this.http.get(url);
     }

	 //POST
	 update(boardGame: BoardGame): Observable {
		const url = `BoardGame/Edit`;
		return this.http.post(url, JSON.stringify(boardGame), httpOptions);
}

Aktualizacja komponentów

Stara wersja komponentu:

import { Component, OnInit } from "@angular/core";
import { ActivatedRoute, Router } from "@angular/router";
import 'rxjs/add/operator/switchMap';
import { BoardGameService } from "./BoardGame.service";
import { BoardGame } from "./BoardGame";

export class BoardGameComponent implements OnInit {
	boardGames: BoardGame[];
	boardGame: BoardGame;

    constructor(
        private boardGameService: BoardGameService,
        private route: ActivatedRoute,
        private router: Router) {
    }

	ngOnInit(): void {
		this.route.params
			.switchMap(() => this.boardGameService.getBoardGames())
			.subscribe((boardGameList: BoardGame[]) => {
				this.boardGames = boardGameList;
			});
	}

	save(): void {
		var loc = this.location;
		this.boardGameService.update(this.boardGame)
			.then(errorMessage => { new Common(loc).showErrorOrGoBack(errorMessage); });
	}
}

Nowa wersja komponentu:

import { Component, OnInit } from "@angular/core";
import { Router } from "@angular/router";
import { BoardGameService } from "./BoardGame.service";
import { BoardGame } from "./BoardGame";

export class BoardGameComponent implements OnInit {
	boardGames: BoardGame[];
	boardGame: BoardGame;

    constructor(
        private boardGameService: BoardGameService,
        private router: Router) {
    }

	ngOnInit(): void {
		this.boardGameService.getBoardGames()
			.subscribe((boardGameList: BoardGame[]) => {
				this.boardGames = boardGameList;
			});
	}

	save(): void {
		var loc = this.location;
		this.boardGameService.update(this.boardGame)
			.subscribe(errorMessage => { new Common(loc).showErrorOrGoBack(errorMessage); });
	}
}

Główne różnice

• HttpClientModule zamiast HttpModule,
• HttpHeaders zamiast Headers,
• subscribe() zamiast then(),
• nie trzeba używać .toPromise(), .then(), .catch(), ani switchMap().