Angular2 gestisce la risposta http

Ho solo una domanda riguardante la strutturazione e la gestione delle risposte da richieste HTTP all’interno di un servizio. Sto usando Angular2.alpha46 Typescript (Ho appena iniziato a provarlo – che adoro … Ps .. Grazie a tutti coloro che ci hanno lavorato e hanno contribuito tramite github)

Quindi prendi quanto segue:

login-form.component.ts

import {Component, CORE_DIRECTIVES, FORM_DIRECTIVES} from 'angular2/angular2'; import {UserService} from '../../shared/service/user.service'; import {Router} from 'angular2/router'; import {User} from '../../model/user.model'; import {APP_ROUTES, Routes} from '../../core/route.config'; @Component({ selector: 'login-form', templateUrl: 'app/login/components/login-form.component.html', directives: [CORE_DIRECTIVES, FORM_DIRECTIVES] }) export class LoginFormComponent { user: User; submitted: Boolean = false; constructor(private userService:UserService, private router: Router) { this.user = new User(); } onLogin() { this.submitted = true; this.userService.login(this.user, () => this.router.navigate([Routes.home.as])) } } 

da questo componente importare il mio userService che ospiterà la mia richiesta http per accedere all’utente il servizio assomiglia a questo:

user.service.ts

 import {Inject} from 'angular2/angular2'; import {Http, HTTP_BINDINGS, Headers} from 'angular2/http'; import {ROUTER_BINDINGS} from 'angular2/router'; import {User} from '../../model/user.model'; export class UserService { private headers: Headers; constructor(@Inject(Http) private http:Http) { } login(user: User, done: Function) { var postData = "email=" + user.email + "&password=" + user.password; this.headers = new Headers(); this.headers.append('Content-Type', 'application/x-www-form-urlencoded'); this.http.post('/auth/local', postData, { headers: this.headers }) .map((res:any) => res.json()) .subscribe( data => this.saveJwt(data.id_token), err => this.logError(err), () => done() ); } saveJwt(jwt: string) { if(jwt) localStorage.setItem('id_token', jwt) } logError(err: any) { console.log(err); } } 

Quello che voglio fare è essere in grado di gestire la risposta che la chiamata restituisce dopo la richiesta http. Ad esempio, se le credenziali dell’utente non sono valide, passerò una risposta 401 dal backend. La mia domanda è dove è il modo migliore per gestire la risposta e restituire il risultato al componente da cui ho chiamato il metodo, in modo da poter manipolare la vista per mostrare il messaggio di successo o visualizzare un messaggio di errore.

Al momento nel mio servizio di accesso al momento non sto gestendo la risposta Sto semplicemente facendo una richiamata al componente originale ma ritengo che questo non sia il modo corretto per farlo? Qualcuno può far luce su cosa farebbero in questo scenario tipico? Dovrei gestire la risposta nel primo parametro della funzione subscribe come:

  login(user: User, done: Function) { var postData = "email=" + user.email + "&password=" + user.password; this.headers = new Headers(); this.headers.append('Content-Type', 'application/x-www-form-urlencoded'); this.http.post('/auth/local', postData, { headers: this.headers }) .map((res:any) => res.json()) .subscribe( (data) => { // Handle response here let responseStat = this.handleResponse(data.header) // Do some stuff this.saveJwt(data.id_token); // do call back to original component and pass the response status done(responseStat); }, err => this.logError(err) ); } handleResponse(header) { if(header.status != 401) { return 'success' } return 'error blah blah' } 

In questo caso, la call back è buona o può essere gestita meglio con un osservabile o una promise?

Concludendo ciò che sto chiedendo è … Qual è la migliore pratica per gestire la risposta dalla risposta http e gestire lo stato nella vista del modulo da user.service.ts al login-form.component.ts