Angular · BoardGamesNook · Programowanie · TypeScript

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().

 

4 myśli na temat “Angular 5 – HttpClient

Skomentuj

Wprowadź swoje dane lub kliknij jedną z tych ikon, aby się zalogować:

Logo WordPress.com

Komentujesz korzystając z konta WordPress.com. Wyloguj /  Zmień )

Zdjęcie na Google+

Komentujesz korzystając z konta Google+. Wyloguj /  Zmień )

Zdjęcie z Twittera

Komentujesz korzystając z konta Twitter. Wyloguj /  Zmień )

Zdjęcie na Facebooku

Komentujesz korzystając z konta Facebook. Wyloguj /  Zmień )

w

Connecting to %s