Partial observable handling in Angular 2 - angularjs

Question

I have a component which a login form: loginForm which calls my api:
onLogin(): void {
let username = this.loginForm.value.username;
let password = this.loginForm.value.password;
this.api.login(username, password);
.map(res => res.json())
.subscribe(
this._processData,
);
}
There is a service which calls an api: loginService.
login(username: string, password: string): Subscription<any> {
let headers = new Headers();
headers.append("Content-Type", "application/json");
return this.http.put("https://myapi.com", JSON.stringify({ username: username, password: password}), {
headers: headers
})
.map(res => res.json())
.subscribe(
data => console.log(data),
err => console.log(err),
() => console.log("Done")
);
}
What I want is the error to be handled inside the loginService. But the result back to the onLogin method.
I tried a variety of mapping handlers (as shown) in the onLogin but could not get it to work. Any thoughts about what I might do wrong?

Answer 1

In fact, you define a callback within the subscribe method to handle error in the login method (the second parameter). If you want to let errors to be propagated into your onLogin method you need to remove this callback (and even the call of subscribe).
return this.http.put("https://myapi.com",
JSON.stringify({ username: username, password: password}), {
headers: headers
})
.map(res => res.json());
If you want to log the error and then propagate it you can leverage the Observable.throw method:
return this.http.put("https://myapi.com",
JSON.stringify({ username: username, password: password}), {
headers: headers
})
.map(res => res.json())
.catch(err => {
console.log(err);
return Observable.throw(err);
});
In this case you need to add a callback to handle the error in the onLogin method:
onLogin(): void {
let username = this.loginForm.value.username;
let password = this.loginForm.value.password;
this.api.login(username, password)
.subscribe(
(data) => {
// Success
this._processData(data)
},
(err) => {
// Error
}
);
}
You can notice that there is a catch operator on Observable to catch error and in the case of errors, the map operator isn't called.
These answers could give you more details:
Angular2 http observables - how to work with undefined type
Observable Map function not running (Angular2, http)
Hope it helps you,
Thierry

Answer 2

You can define your error handler in your service, and just pass the error from component where you subscribe.
// component
onLogin(): void {
let username = this.loginForm.value.username;
let password = this.loginForm.value.password;
this.api
.login(username, password)
.subscribe(
this._processData, // success
this.api.onError // error
// if above doesn't work this should:
// error => this.api.onError(error)
);
}
_processData(...data) { console.log(data); }
// service
login(username: string, password: string): Subscription<any> {
let headers = new Headers();
headers.append("Content-Type", "application/json");
return this.http
.put("https://myapi.com", JSON.stringify({ username: username, password: password}), { headers: headers })
.map(res => res.json())
}
onError(...args) { console.log(args); }