Restangular running onFulfilled callback on promise even when promise is rejected

Question

I'm moving my subject data to a service and trying to smart about the code but I'm running into some issues.

When I turn off my API server and run the create function, I expect just the onRejected callback to be fired. Rather both the onFulfilled and the onRejected callbacks are being fired.

Service

(function(){
  'use strict';

  angular
  .module('app')
  .factory('$cmSubjectData', $cmSubjectData);

  function $cmSubjectData($log, Restangular, $mdToast) {

    var service = {
      getAll: getAll,
      getById: getById,
      update: update,
      create: create,
      destroy: destroy
    };

    return service;

    function getAll() {
      return subjects().getList().then(handleSuccess, handleError('Error getting all subjects'));
    }

    function getById(id) {
      return subjects().one(id).get().then(handleSuccess, handleError('Error getting this subject'));
    }

    function update(subject) {
      Restangular.all('subjects')
      .post(subject)
      .then(handleSuccess, handleError('Error updating subject'));
    }

    function create(subject) {
      Restangular.all('subjects')
      .post(subject)
      .then(successToast(subject.basicInfo.firstName + ' has been created'), handleError('Error creating subject'));
    }

    function destroy(id) {
      var subject = subjects().one(id);
      subject.remove()
      .then(successToast('Subject has been deleted!'), handleError('There was an error deleting this subject'));
    }

    // Private Functions
    function subjects() {
      return Restangular.service('subjects');
    }

    function handleSuccess(data) {
      $log.info('Success');
      return data;
    }

    function handleError(error) {
      return function () {
        $log.warn(error);
      };
    }

    function successToast(content) {
      $mdToast.show(
        $mdToast.simple()
        .content(content)
      );
    }

  }

})();

Controller

(function() {
  'use strict';

  angular
  .module('app')
  .controller('SubjectNewCtrl', SubjectNewCtrl);

  function SubjectNewCtrl($cmSubjectData) {

    var vm = this;

    vm.subject = {};
    vm.createSubject = $cmSubjectData.create;

  }

})();

View where function is called:

<button ng-click="vm.createSubject(vm.subject)">Add</button>

Any help would be appreciated.

Answer 1

When you do

.then(successToast(...))

you are running successToast(...) immediately and passing the return value from that to .then() which is not the timing you want. Remember, you have to pass a function reference to .then() if you want it executed later. If you include the parens () with your function, then that tells Javascript to execute your function immediately. That is not what you want in this case. If you had no extra arguments to the function, you could just do:

.then(successToast)

But, because you have arguments you want to pass when you call it, you can't do it that way. So, you have two choices. You can make it work like handleError() where calling it with the arguments just returns a function (so that is what gets passed to .then() like this:

function successToast(content) {
  return function() {
      $mdToast.show($mdToast.simple().content(content));
  }
}

Then, it gets call like you have already:

.then(successToast(subject.basicInfo.firstName + ' has been created'))

Or you can insert your own stub function reference in the call itself:

.then(function() {
    return successToast(subject.basicInfo.firstName + ' has been created');
});

Either example passes a function reference to .then() and does not execute the core of your logic until later when .then() calls that function reference.