Check HTTP Statuscode on POST

Ionic Framework ionic-v3
1

I want to send a POST call from my Ionic 2 app to an API. The API checks the data I send and then outputs either the statuscode 200 OK or 400 Bad Request. I want to execute a function when the statuscode is 200 and show an alert when the statuscode is 400. This is the code I have right now:

    register(event) {
        var firstname = this.registerForm.value.firstname;
        var lastname = this.registerForm.value.lastname;
        var email = this.registerForm.value.email;
        var password = this.registerForm.value.password;
        event.preventDefault();

        this.backend.register(firstname, lastname, email, password)
            .then(data => {
                console.log("data after then: " + data);
                this.data = data;
                if (this.data == 200) {
                    this.toLogin();
                } else {
                    console.log(this.data);
                    let alert = Alert.create({
                        title: 'Error',
                        subTitle: 'Error,
                        buttons: ['OK']
                    });
                    this.nav.present(alert);
                };
            });
    }

  register(firstname, lastname, email, password) {

      return new Promise(resolve => {

          var json = JSON.stringify({ firstname: firstname, lastname: lastname, email: email, password: password });
          var headers = new Headers();
          headers.append('Content-Type', 'application/json');

          this.http.post('someurl',
              json, {
                  headers: headers
              })
              .map(res => res.json())
              .subscribe(response => {
                  this.data = 200;
                  resolve(this.data);
              }, error => {
                  this.data = 400;
                  resolve(this.data);
              });
      });
  
  }

This always seems to show the alert, even when the network tab in the developer console shows a 200 OK, because data is set to 400 in the backend.register() function. I’m guessing this happens because the POST request doesn’t send data back, and thus the code in the error section is executed. Is there a way to implement what I’m looking for?

2

register is sort of a zoo. 99.999% of the time you feel the urge to create a Promise, you really shouldn’t, and this is one of those cases. This line:

.map(res => res.json())

…doesn’t make any sense to me, because you don’t seem to care about the response body, only about the status code. So if that’s true, it seems that it would be more straightforward to do something like this:

register(firstname:string, lastname:string, email:string, password:string): Observable<Response> {
  let json = JSON.stringify({ firstname: firstname, lastname: lastname, email: email, password: password });
  let headers = new Headers();
  headers.append('Content-Type', 'application/json');
  return this.http.post('someurl', json, {headers: headers});
}

register(event:Event) {
  // set up variables
  this.backend.register(firstname, lastname, email, password)
  .subscribe(() => {
    // do happy stuff
  }, (err) => {
    // do alerty stuff
  });
}
3 Likes
3

Thanks, that worked like a charm!