web-dev-qa-db-fra.com

Angular 2: Comment appeler une fonction après avoir obtenu une réponse de subscribe http.post

J'ai besoin d'appeler une méthode après avoir récupéré les données de la requête http post

service: request.service.TS

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

      }, error => {
    }
  ); 

}

composant: 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();
}

Ne fonctionne que si je change pour:

service: 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 => {
    }
  ); 

}

Mais je dois appeler la méthode send_catagories() à l'intérieur du composant après l'appel this.get_categories(1); comme ceci

composant: catégories.TS

search_categories() {

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

Qu'est-ce que je fais mal?

javascriptangulartypescriptpromisesubscribe
24
Louise

Mettez à jour votre méthode get_categories() sur retourne le total (enveloppé dans 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());
}

Dans search_categories(), vous pouvez abonner l'observable renvoyé par get_categories() (ou vous pouvez continuer à le transformer en chaînant davantage d'opérateurs 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")
    );
}

Notez que vous ne vous abonnez qu'une fois, à la fin.

Comme je l'ai dit dans les commentaires, la méthode .subscribe() de tout observable accepte 3 callbacks comme ceci:

obs.subscribe(
  nextCallback,
  errorCallback,
  completeCallback
);

Ils doivent être passés dans cet ordre. Vous n'êtes pas obligé de passer tous les trois. Plusieurs fois, seul le nextCallback est implémenté:

obs.subscribe(nextCallback);
39
AngularChef

Vous pouvez ajouter une fonction de rappel à votre liste de paramètres get_category (...).

Ex:

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

      }, error => {
    }
  ); 

}

Et ensuite, vous pouvez simplement appeler get_category (...) comme ceci:

this.get_category(1, name_of_function);
7
Gab

Vous pouvez coder en tant qu'expression lambda en tant que troisième paramètre (sur terminé) pour la méthode subscribe. Ici, je redéfinis la variable departmentModel sur les valeurs par défaut.

saveData(data:DepartmentModel){
  return this.ds.sendDepartmentOnSubmit(data).
  subscribe(response=>this.status=response,
   ()=>{},
   ()=>this.departmentModel={DepartmentId:0});
}
4
Sushrut Kanetkar
get_categories(number){
 return this.http.post( url, body, {headers: headers, withCredentials:true})
      .map(t=>  {
          this.total = t.json();
          return total;
      }).share();
  );     
}

ensuite

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

Vous pouvez faire cela en utilisant un nouveau Subject aussi:

TypeScript:

let subject = new Subject();

get_categories(...) {
   this.http.post(...).subscribe( 
      (response) => {
         this.total = response.json();
         subject.next();
      }
   ); 

   return subject; // can be subscribed as well 
}

get_categories(...).subscribe(
   (response) => {
     // ...
   }
);
1
Willi Mentzel