Angular2 post to web service

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?

Günter Zöchbauer · Accepted Answer · 2016-05-02T12:35:22.003

3

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

edited May 02 '16 at 12:35

answered May 02 '16 at 12:30

Günter Zöchbauer

623,577
216
2,003
1,567

http://stackoverflow.com/questions/34515173/angular-2-http-get-with-typescript-error-http-get-map-is-not-a-function-in – Günter Zöchbauer May 02 '16 at 12:36
so which code should i use the first one or the last one? that you posted – Jon May 02 '16 at 12:53
That depends on what you want to accomplish ;-). If this code is in a service and you want to get the result in a component or another service, the 2nd is a better fit. If you just want to store the value in the service that also contains the `send()` method, than you can also use the first. I guess the 2nd is usually what you want because it works well in both cases. – Günter Zöchbauer May 02 '16 at 12:55
This code is in an ionic mobile app, that will post the message to a rails web service, and the web service will send it as an email. – Jon May 02 '16 at 13:00
i used the 2nd code and now the chrome console throws errors. `Error during evaluation of "ngSubmit"` `ORIGINAL EXCEPTION: RangeError: Maximum call stack size exceeded` and more errors – Jon May 02 '16 at 13:01
A "Service" is just a class that is provided globally. See also https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service – Günter Zöchbauer May 02 '16 at 13:02
That can't be caused by the changes I proposed. I would need to see more of your code. Maybe worth a new question that shows how you applied the code of my answer? – Günter Zöchbauer May 02 '16 at 13:04
oh, the code is not in a service, i just created a new ionic project and im using the getting-started.html, getting-started.css, and getting-started.ts. the last one is where i have the code – Jon May 02 '16 at 13:05
1

http://stackoverflow.com/questions/36983365/angular2-ionic2-post-to-web-service i created a new question with the code – Jon May 02 '16 at 13:15

score 0 · Answer 2 · edited May 23 '17 at 10:30

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

Angular2 post to web service

2 Answers2