http - example - Angular 2-Comprobando errores de servidor desde la suscripción

http post angular 5

Question

Siento que este escenario debería estar en los documentos de Angular 2, pero no puedo encontrarlo en ninguna parte.

Aquí está el escenario

1. enviar un formulario (crear objeto) que no es válido en el servidor
2. El servidor devuelve una solicitud incorrecta 400 con errores que muestro en el formulario
3. después de que vuelva la suscripción, quiero verificar una variable de error o algo así (es decir, si no hay errores> luego diríjase a la página de detalles recién creada)

Me lo imagino trabajando algo como esto:

this.projectService.create(project)
    .subscribe(
        result => console.log(result),
        error => {
            this.errors = error
        }
    ); 
}

if (!this.errors) {
    //route to new page
}

Soy muy nuevo en Angular 2, así que esto puede deberse a mi falta de comprensión sobre cómo funciona un observable. No tengo ningún problema con mostrar esos datos en el formulario, pero no puedo descubrir cómo verlos dentro del componente ts. Realmente solo quiero comprobar el éxito / fracaso de la creación de http.

Answer 1

Como se indica en la documentación relevante de RxJS, el método .subscribe() puede tomar un tercer argumento que se llama al finalizar si no hay errores.

Para referencia:

1. [onNext] ( Function ): Función a invocar para cada elemento en la secuencia observable.
2. [onError] ( Function ): función que se invoca en caso de terminación excepcional de la secuencia observable.
3. [onCompleted] ( Function ): Función para invocar una terminación elegante de la secuencia observable.

Por lo tanto, puede manejar su lógica de enrutamiento en la onCompleted llamada onCompleted ya que se solicitará una terminación elegante (lo que implica que no habrá ningún error cuando se llame).

this.httpService.makeRequest()
    .subscribe(
      result => {
        // Handle result
        console.log(result)
      },
      error => {
        this.errors = error;
      },
      () => {
        // ''onCompleted'' callback.
        // No errors, route to new page here
      }
    );

Como nota al margen, también hay un método .finally() que se llama al finalizar, independientemente del éxito / fracaso de la llamada. Esto puede ser útil en situaciones en las que siempre desea ejecutar cierta lógica después de una solicitud HTTP, independientemente del resultado (es decir, para fines de registro o para alguna interacción de IU, como mostrar un modal).

Rx.Observable.prototype.finally(action)

Invoca una acción especificada después de que la secuencia observable de la fuente termine con gracia o excepcionalmente.

Por ejemplo, aquí hay un ejemplo básico:

import { Observable } from ''rxjs/Rx'';
import ''rxjs/add/operator/finally'';

// ...

this.httpService.getRequest()
    .finally(() => {
      // Execute after graceful or exceptionally termination
      console.log(''Handle logging logic...'');
    })
    .subscribe (
      result => {
        // Handle result
        console.log(result)
      },
      error => {
        this.errors = error;
      },
      () => {
        // No errors, route to new page
      }
    );

Answer 2

Puedes lograrlo de la siguiente manera.

    this.projectService.create(project)
    .subscribe(
        result => {
         console.log(result);
        },
        error => {
            console.log(error);
            this.errors = error
        }
    ); 
}

if (!this.errors) {
    //route to new page
}