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().
Powiedz, miałaś tego posta zaplanowanego? Bo nie wierzę, że po Boiling Frogs wstałaś rano i napisałaś tego posta 😀
PolubieniePolubione przez 1 osoba
Nie wstałam :p Był zaplanowany.
PolubieniePolubienie
Ale przecież metody HttpClient od początku (od Angular 2) zwracały Observable.
PolubieniePolubienie
Faktycznie. Tylko w AngularJS zwracane były Promisy. Dzięki za czujność 🙂
PolubieniePolubienie