Utilizing Angular's promise rejection chaining method

Question

Utilizing Angular's promise rejection chaining method

When dealing with a chained promise and facing rejection in any of the promises, I require an async operation to be performed (such as retrieving a translated error message). Since chaining on rejection seems impossible when there is already a chained promise on success, I tried nesting the async calls. However, I encountered an issue where I am not receiving the resolved promise back from

deferred.reject(deferredRejection.promise);

below. Any guidance would be greatly appreciated!

login: function(email, password) {
  var deferred = $q.defer();
  AuthService.login(email, password).then(function(response) {
    var user = {
      'accountToken': response.accountToken,
      'email': response.username,
      'onboarded': response.onboarded,
      'verified': response.verified
    };          
    return SyncStorageService.write(SyncStorageService.storageKeys.user, 
        user);  
  }, function(error) {
    // login failed
    var deferredRejection = $q.defer();
    $translate('ALERTS.LOGIN_FAILED').then(function(translatedValue) {
      deferredRejection.resolve(translatedValue);
    });
    deferred.reject(deferredRejection.promise);
  }).then(function(data) {
    deferred.resolve(data);
  }, function(error) {
    // saving data failed
    var deferredRejection = $q.defer();
    $translate('ALERTS.UNKNOWN').then(function(translatedValue) {
      deferredRejection.resolve(translatedValue);
    });
    deferred.reject(deferredRejection.promise);
  });
  return deferred.promise;
}

Updated Solution:

Following the advice provided, I have refactored the code as shown below:

login: function(email, password) {
  return AuthService.login(email, password).then(function(response) {
    return {
      'accountToken': response.accountToken,
      'email': response.username,
      'onboarded': response.onboarded,
      'verified': response.verified
    };
  }).then(function(data) {
    return SyncStorageService.write(SyncStorageService.storageKeys.user, 
        data);
  });
}

Additional Information:

Both AuthService.login and SyncStorageService.write now reject promises with an Error object (e.g.
```
new Error('ALERT.ERROR_MESSAGE');
```
), which will propagate through the login method to the controller (instead of handling translation at the service level)
The calling controller for the login method includes .then() and .catch() blocks - if caught in a .catch(), the Error.message passed will be translated and displayed.

javascript angularjs angular-promise angular-translate

Answer 1

Answer №1

It seems like you're not effectively chaining promises and could be falling into the trap of using the forgotten promise/deferred anti-pattern. By making some assumptions about your intended behavior and simplifying the calls to $translate, the code below might align more with what you're aiming for:

login: function(email, password) {
  return AuthService.login(email, password).then(function(response) {
    return {
      'accountToken': response.accountToken,
      'email': response.username,
      'onboarded': response.onboarded,
      'verified': response.verified
    };          
  }, function() {
    return $q.reject('ALERTS.LOGIN_FAILED');
  }).then(function(user) {
    return SyncStorageService.write(SyncStorageService.storageKeys.user, user).catch(function() {
      return $q.reject('ALERTS.UNKNOWN');
    });
  }).catch(function(message) {
    return $translate(message).then(function(translatedValue) {
      return $q.reject(translatedValue);
    });
  });
}

Key points to remember are:

If you specifically want to reject the derived promise, use $q.reject(error) in the success or error callback.

All error callbacks in the example follow this pattern. The translations keys used as errors will eventually propagate through to the final catch callback. The success callback from $translate also rejects its resolved promise, so the final catch callback returns a rejected promise, likely displaying the translated error to the user.
If you want to resolve the derived promise, return any value that isn't a promise in the success or error callbacks. This returned value will resolve the derived promise (including undefined if no explicit return is provided).

This is demonstrated when returning the user object return {'accountToken'.... in the first callback.
To delay resolution or rejection of a promise, return another promise in the success or error callback. The derived promise will wait for this nested promise's outcome before resolving or rejecting accordingly.

This concept is shown in the code by returning SyncStorageService.write... and $translate(....

Answer 2

It seems like you're not effectively chaining promises and could be falling into the trap of using the forgotten promise/deferred anti-pattern. By making some assumptions about your intended behavior and simplifying the calls to $translate, the code below might align more with what you're aiming for:

login: function(email, password) {
  return AuthService.login(email, password).then(function(response) {
    return {
      'accountToken': response.accountToken,
      'email': response.username,
      'onboarded': response.onboarded,
      'verified': response.verified
    };          
  }, function() {
    return $q.reject('ALERTS.LOGIN_FAILED');
  }).then(function(user) {
    return SyncStorageService.write(SyncStorageService.storageKeys.user, user).catch(function() {
      return $q.reject('ALERTS.UNKNOWN');
    });
  }).catch(function(message) {
    return $translate(message).then(function(translatedValue) {
      return $q.reject(translatedValue);
    });
  });
}

Key points to remember are:

If you specifically want to reject the derived promise, use $q.reject(error) in the success or error callback.

All error callbacks in the example follow this pattern. The translations keys used as errors will eventually propagate through to the final catch callback. The success callback from $translate also rejects its resolved promise, so the final catch callback returns a rejected promise, likely displaying the translated error to the user.
If you want to resolve the derived promise, return any value that isn't a promise in the success or error callbacks. This returned value will resolve the derived promise (including undefined if no explicit return is provided).

This is demonstrated when returning the user object return {'accountToken'.... in the first callback.
To delay resolution or rejection of a promise, return another promise in the success or error callback. The derived promise will wait for this nested promise's outcome before resolving or rejecting accordingly.

This concept is shown in the code by returning SyncStorageService.write... and $translate(....

Utilizing Angular's promise rejection chaining method

Answer №1

Similar questions

Missing Cookie in request using NodeJS and NextJS

What steps can be taken to customize this code in order to develop a dictation application?

Utilizing jQuery to efficiently chunk JSON data through AJAX calls

How can I ensure security measures are in place to avoid XSS attacks on user-generated HTML content?

Is it necessary for me to use a .jsx extension when saving my React component files?

Using jQuery to load the center HTML element

I encountered an error while trying to load the resource from http://premieroptie.nl/wp-content/themes/theme51771/favicon.ico: net::ERR_NAME_NOT_RESOLVED

Extract the comma-separated values from an array that are combined as one

What is the best way to save longitude and latitude coordinates in a database using the <input> method?

Ways to determine the name of the calling function in an AJAX or XMLHttpRequest request?

Insufficient Resources Error (net::ERR_INSUFFICIENT_RESOURCES) encountered while executing jQuery script with multiple ajax requests for 2 minutes

Guide to implementing 'active' state in Bootstrap 4 using JavaScript on a basic PHP website

Modify the background color of paragraph using JavaScript based on the outcome

Having issues with Facebook's login API for JavaScript?

Is there a way to determine the size of an array following the use of innerHTML.split?

What is the best way to utilize window.find for adjusting CSS styles?

The significance of the dollar sign in ReactJs

What is the best method to obtain the user id within a Redux action?

AngularJS - Determine the correct condition or make a choice from the available options

Passing arguments to an external function in jQuery from a dynamically loaded Ajax page