web-dev-qa-db-ja.com

Angular 2：サブスクライブhttp.postから応答を取得した後に関数を呼び出す方法

Http postリクエストからデータを取得した後にメソッドを呼び出す必要があります

サービス：request.service.TS

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

      }, error => {
    }
  ); 

}

コンポーネント：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();
}

以下に変更した場合にのみ機能します：

サービス：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 => {
    }
  ); 

}

しかし、send_catagories()を呼び出した後、コンポーネント内でthis.get_categories(1);メソッドを呼び出す必要があります。

コンポーネント：Categories.TS

search_categories() {

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

私が間違っていることは何ですか？

javascriptangulartypescriptpromisesubscribe
24
Louise

get_categories()メソッドをreturn合計（オブザーバブルにラップ）に更新します。

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

search_categories()では、get_categories()によって返されるオブザーバブルをサブスクライブできます（または、さらに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")
    );
}

最後にONCEのみをサブスクライブすることに注意してください。

コメントで言ったように、observableの.subscribe()メソッドは、次のような3つのコールバックを受け入れます。

obs.subscribe(
  nextCallback,
  errorCallback,
  completeCallback
);

これらはこの順序で渡す必要があります。 3つすべてに合格する必要はありません。多くの場合、nextCallbackのみが実装されます。

obs.subscribe(nextCallback);
39
AngularChef

Get_category（...）パラメーターのリストにコールバック関数を追加できます。

例：

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

      }, error => {
    }
  ); 

}

そして、次のようにget_category（...）を呼び出すことができます：

this.get_category(1, name_of_function);
7
Gab

Subscribeメソッドの3番目のパラメーター（完了時）としてラムダ式としてコーディングできます。ここで、departmentModel変数をデフォルト値に再設定します。

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

それから

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

新しいSubjectを使用してこれを行うこともできます。

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