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.