Angular2 Webサービスへの投稿

Question

constructor(platform: Platform, public http: Http) { 
    this.platform = platform; 
    this.headers = new Headers(); 
    this.headers.append('Content-Type', 'application/x-www-form-urlencoded'); 
} 



send(subject, body) 
{ 
    var body = "subject=" + subject + "&body=" + body; 

    let result = this.http.post('http://172.16.2.115:3004/message', 
     body, 
     { 
      headers: this.headers 
     }); 


    console.log(body); 
    console.log(this._apiUrl); 

    return result;   
} 

Ionic2とAngular2ベータ版を使用してRuby on Rails Webサービスにメッセージを投稿しようとしています。 ウェブサービスは正常に機能しますが、問題はイオンアプリがメッセージを投稿しているようです。 これは正しく見えますか？

Answer 1

あなたがsubscribe()する必要がありそうでなければ要求はあなたがsubscribe()にrepsonseを処理するコードを移動する必要が

send(subject, body) 
{ 
    var body = "subject=" + subject + "&body=" + body; 

    let result = this.http.post('http://172.16.2.115:3004/message', 
     body, 
     { 
      headers: this.headers 
     }) 
    .subscribe(res => { 
     this.comments = res.json(); 
     console.log(body); 
     console.log(this._apiUrl); 

     // no effect here 
     // return result;    
    }); 
} 

を送信されませんそれ以外の場合は、応答が到着する前に実行されます。 結果を返すことはできません。あなたは他の誰かが視聴するために観測可能なものだけを返すことができます。

send(subject, body) 
{ 
    var body = "subject=" + subject + "&body=" + body; 

    return this.http.post('http://172.16.2.115:3004/message', 
     body, 
     { 
      headers: this.headers 
     }); 
    .map(res => { 
     this.comments = res.json(); 
    }); 
} 

this.send.subscribe(res => { 
    console.log(body); 
    console.log(this._apiUrl); 
}); 

Answer 2

observableが怠けているため、observableを購読して実行する必要があります。

結果を呼び出し元に返す場合は、呼び出し元のメソッド内でサブスクライブすることができます。要求が非同期に実行されることを忘れないでください。そうすれば、subscribeメソッドで指定されたコールバックで応答データを受信します。この場合

this.service.send(asunto, cuerpo).subscribe((result) => { // <------ 
    // do something with the result 
}); 

、send方法は同じまますることができます：

send(asunto, cuerpo) { 
    var body = "subject=" + asunto + "&body=" + cuerpo; 

    return this.http.post(this._apiUrl, 
    body, { 
     headers: this.headers 
    }).map(res => res.json()); 
} 

あなたはHTTPサービスと対話するようにコードを整理する方法に興味があるなら、あなたが見ている可能性がありこの質問：

• How to Consume Http Component efficiently in a service in angular 2 beta?

また、あなたのフォームの内容をbuldするURLSearchParamsクラスを活用できます。

let content = new URLSearchParams(); 
content.set('subject', asunto); 
content.set('body', cuerpo); 

var inputPayload = content.toString();