Angular 2: Cómo llamar a una función después de obtener una respuesta de subscribe http.post

Necesito llamar a un método después de obtener los datos de la petición http post

Servicio: request.service.TS

get_categories(number){
 this.http.post( url, body, {headers: headers, withCredentials:true})
    .subscribe( 
      response => {
        this.total = response.json();

      }, error => {
    }
  ); 

}

componente: categories.TS

search_categories() {

this.get_categories(1);
//I need to call a Method here after get the data from response.json() !! e.g.: send_catagories();
}

Sólo funciona si cambio a:

servicio: request.service.TS

get_categories(number){
 this.http.post( url, body, {headers: headers, withCredentials:true})
    .subscribe( 
      response => {
        this.total = response.json();
        this.send_catagories(); //here works fine

      }, error => {
    }
  ); 

}

Pero necesito llamar al método send_catagories() dentro del componente después de llamar a this.get_categories(1); así

componente: categories.TS

search_categories() {

this.get_categories(1);
this.send_catagories(response);
}

¿Qué estoy haciendo mal?

Adrita Sharma
Pregunta editada 3º diciembre 2017 в 3:48
Programación
javascript angular typescript promise subscribe
15º febrero 2017 в 12:38
No hay vistas aún
Solución

Actualice su método get_categories() para devolver el total (envuelto en un observable):

// Note that .subscribe() is gone and I've added a return.
get_categories(number) {
  return this.http.post( url, body, {headers: headers, withCredentials:true})
    .map(response => response.json());
}

En search_categories(), puedes suscribir el observable devuelto por get_categories() (o podrías seguir transformándolo encadenando más operadores RxJS):

// send_categories() is now called after get_categories().
search_categories() {
  this.get_categories(1)
    // The .subscribe() method accepts 3 callbacks
    .subscribe(
      // The 1st callback handles the data emitted by the observable.
      // In your case, it's the JSON data extracted from the response.
      // That's where you'll find your total property.
      (jsonData) => {
        this.send_categories(jsonData.total);
      },
      // The 2nd callback handles errors.
      (err) => console.error(err),
      // The 3rd callback handles the "complete" event.
      () => console.log("observable complete")
    );
}

Ten en cuenta que sólo te suscribes una vez, al final.

Como dije en los comentarios, el método .subscribe() de cualquier observable acepta 3 callbacks como este:

obs.subscribe(
  nextCallback,
  errorCallback,
  completeCallback
);

Deben pasarse en este orden. No es necesario pasar los tres. Muchas veces sólo se implementa el nextCallback:

obs.subscribe(nextCallback);
AngularChef
Respuesta editada 15º febrero 2017 в 9:50
Comentarios (6)

Puede añadir una función de devolución de llamada a su lista de parámetros get_category(...).

Ej:

 get_categories(number, callback){
 this.http.post( url, body, {headers: headers, withCredentials:true})
    .subscribe( 
      response => {
        this.total = response.json();
        callback(); 

      }, error => {
    }
  ); 

}

Y entonces puedes llamar a get_category(...) así:

this.get_category(1, name_of_function);
Comentarios (4)
 
get_categories(number){
 return this.http.post( url, body, {headers: headers, withCredentials:true})
      .map(t=>  {
          this.total = t.json();
          return total;
      }).share();
  );     
}

entonces

this.get_category(1).subscribe(t=> {
      this.callfunc();
});
Comentarios (4)