Can't use .then() on ember-ajax's Promise after code 200

[nicodv]

So, I'm using ember-ajax to call my user registration endpoint without problems, see code below. The endpoint returns a 201.

Note the use of registerSuccess, which I use in my template to inform the user of success.

export default Ember.Component.extend({
  ajax: Ember.inject.service(),

  actions: {
    register() {
      var self = this;
      var userdata = this.getProperties('identification', 'password', 'email');
      return this.get('ajax').post('/auth/register//', {
        data: JSON.stringify({
          username: userdata['identification'],
          password: userdata['password'],
          email: userdata['email']
        })
      }).then(
        () => self.set('registerSuccess', true)
      ).catch(function(error) {
        if (error.errors) {
          var rawErrors = error.errors[0].detail;
          self.set('errors', rawErrors);
          self.set('registerSuccess', false);
        }
      });
    }
  }
});

However, when I try to do the same thing for my 'change password' endpoint (code below), I'm not able to use .then() on the promise for some reason. This endpoint returns a 200 code, which is the only difference between the two. I made a hack below where I set pwChangeSuccess to True first, but that's ugly since the page will always display success first, even if it fails.

export default Ember.Component.extend({
  ajax: Ember.inject.service(),

  actions: {
    changePassword() {
      var self = this;
      var passwords = this.getProperties('oldPassword', 'newPassword', 'new2Password');
      // TODO: why can we do a .then() on a 201 (registration-form) work, but not on this 200?
      self.set('pwChangeSuccess', true);
      return this.get('ajax').post('/auth/password//', {
        data: JSON.stringify({
          new_password: passwords['newPassword'],
          re_new_password: passwords['new2Password'],
          current_password: passwords['oldPassword']
        })
      }).catch(function(error) {
        if (error.errors) {
          var rawErrors = error.errors[0].detail;
          self.set('errors', rawErrors);
          self.set('pwChangeSuccess', false);
        }
      });
    }
  }
});

I thought about customizing 'isSuccess`, but in debugging it showed that I never even reach this method.

I'm not sure if this is a bug, or if I'm doing something wrong.

Any help is appreciated. Thanks!

[alexlafroscia]

Hmm... Does .catch correctly handle an error from your backend at the same endpoint? Is the issue that your .then handler just never gets called, even though it should? I'm curious about the fact that isSuccess is never called... Can you try to place a debugger around here and let me know what happens?

[nicodv]

Errors, if any, get handled correctly by the .catch(). I never get into the hash.success in your link, only into the hash.error, where textStatus is parsererror and errorThrown says: SyntaxError: Unexpected end of input.

I've tested my endpoint, and I realized it returns nothing, only giving a 200 status code.

I've also tested the first endpoint I mention, which work fine. That gives a 201, along with a JSON with user details.

Does my endpoint perhaps have to return something to ember-ajax?

[nicodv]

Does my endpoint perhaps have to return something to ember-ajax?

The answer seem to be "yes". I've added some random data to my response (instead of just a code) and consequently .then() is working fine!

Is this considered logical, or is this a bug?

Thanks for your help!

EDIT
After some more digging, I found the following issue in the djoser package which I use in my backend: sunscrapers/djoser#119

Seems like the 200 coming from my backend should be a 204. This may solve the above for ember-ajax.

[alexlafroscia]

Interesting. If hash.success is never called, it seems like it actually might be an issue with jQuery, since that's where all the real AJAX magic happens right now... Can you try making the request to the same endpoint using raw jQuery.$(...) and let me know if it works there?

If hash.error is getting called, it seems like that would indicate that jQuery is calling that and handling your response as an error, for some reason.

[nicodv]

@alexlafroscia I'm finding plenty of references to jQuery handling 200 with an empty response as an error (since it's trying to parse a response). Apparently, 204s are the way to go.

E.g.: http://stackoverflow.com/questions/10839771/jquery-ajaxerror-runs-even-if-the-response-is-ok-200

I'm closing this, since it seems not specific to ember-ajax. Thanks!

[alexlafroscia]

Sure thing! Glad it's not an Ember-Ajax issue 😁