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

I am trying to post a message to a Ruby on Rails web service using Ionic2 and Angular2 beta. The web service works just fine, the issue is that the ionic app doest seem to be posting the message. Does this look right?

Answer 1

You need to subscribe() otherwise no request will be sent

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

You need to move the code that processes the repsonse into subscribe() otherwise it will be executed before the response arrived. You can't return the result, you can only return the observable for someone else to subscribe.

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

You need to subscribe to the observable to make it execute since observables are lazy.

If you want to return the result to the caller, you can subscribe within the calling method. Don't forget that the request is executed asynchronously, so you will receive the response data in the callback specified in the subscribe method.

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

In this case, the send method can remain the same:

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

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

If you're interested in how to organize your code to interact with an HTTP service, you could have a look at this question:

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

Moreover you could leverage the URLSearchParams class to buld your form content:

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

var inputPayload = content.toString();