angular - delete - ¿Cómo funciona el manejo de errores HTTP con los observables?

http post angular 5

Question

Veo muchos tutoriales haciendo algo como esto:

http.get("...").subscribe(
success => console.log(''hello success''),
error => console.log(''bye error'')
);

No sé cómo funciona esto, ya que no hay ningún tipo ni nada, sin embargo , traté de hacerlo yo mismo y termino diciendo que la solicitud siempre tiene éxito, incluso si tengo un error. ¿Cuál es el problema?

Alborotador:

this.memberService.create(this.currentMember)
.subscribe(
success => {
let mem: Member = success.json() as Member;
if (this.selectedOrganization) {
this.addMemberToOrganization(mem);
} else if (this.selectedServiceProvider) {
this.addMemberToServiceProvider(mem);
} else {
this.toastsService.error("lbl_users_service_provider_and_organization_undefined");
}
},
error => console.log(error)
);

Método de creación en el servicio de miembros:

 create(member: Member): Observable<any> {
return this.http
.post(this.RESOURCE_BASE_URL, member)
.map(response => {
if (response.status === 200) this.toastsSerivce.success(this.translateService.instant(''lbl_users_member_created''));
return response;
})
.catch(error => this.toastsSerivce.error(this.translateService.instant(''lbl_users_member_create_failed'')));
}

Incluso detecto el error, pero a la parte de subscribe no parece importarle. Falla en success.json() , porque si hay un error, no hay json . Pero si hay un error, quiero que llame al error =>... lugar del success . Cualquier consejo es muy apreciado.

Answer 1

Creo que el problema es que no está throwing el error con un Observable.throw(errMsg) .

Entonces, puedes usarlo así:

.catch((error:any) => Observable.throw(error.json().error || ''Server error''));

En tu ejemplo:

create(member: Member): Observable<any> {
return this.http
.post(this.RESOURCE_BASE_URL, member)
.map(response => {
if (response.status === 200) this.toastsSerivce.success(this.translateService.instant(''lbl_users_member_created''));
return response;
})
.catch((error:any) => Observable.throw(this.toastsSerivce.error(this.translateService.instant(''lbl_users_member_create_failed''))));
}

Pero, podría usar un controlador de errores, como el que Angular propone here :

private handleError (error: Response | any) {
// In a real world app, you might use a remote logging infrastructure
let errMsg: string;
if (error instanceof Response) {
const body = error.json() || '''';
const err = body.error || JSON.stringify(body);
errMsg = `${error.status} - ${error.statusText || ''''} ${err}`;
} else {
errMsg = error.message ? error.message : error.toString();
}
console.error(errMsg);
return Observable.throw(errMsg);
}

Y así, tu método se vería más como esto:

create(member: Member): Observable<any> {
return this.http
.post(this.RESOURCE_BASE_URL, member)
.map(response => {
if (response.status === 200) this.toastsSerivce.success(this.translateService.instant(''lbl_users_member_created''));
return response;
})
.catch(this.handleError);
}

En realidad, es más limpio y reutilizable para otros métodos que puede crear dentro de su servicio.

Yo sugeriría usar también un controlador de respuesta, como el que usan los desarrolladores de Angular: this.extractData .

Obviamente, dentro del método de control de errores puede poner su propia lógica personalizada , depende de cómo desea mostrar o manejar el error.

NOTA: No probé su código ni el código que publiqué aquí. Pero quería mostrar / expresar el concepto. Debes lanzar el error para no tener success cada vez . Cómo manejarlo depende de usted y su aplicación.