Tuesday 17 September 2019

Converting AngularJS $q to JavaScript Promise

Since I had to upgrade my app from AngularJS to Angular, I would also need to change my promise returned codes. I needed to change all of my codes that were using $q AngularJS service to the new JavaScript Promise.
These codes:
getItems = function () {
  var deferred = $q.defer();

  try {
   . . .
   deferred.resolve(itemsToBeReturned);
  }
  catch(error) {
   . . .
   deferred.reject(error);
  }
  
  return deferred.promise;
};
are converted into:
getItems() {
 return new Promise((resolve, reject) => {
   try {
    . . .
    resolve(itemsToBeReturned);
   }
   catch(error) {
    . . .
    reject(error);
   }
 });
};
The consuming function can remain the same:
this.getItems()
 .then((items) => {
  // success
  . . .
 })
 .catch(error => {
  // error
  . . .
 });

The new JavaScript Promise also allowed the promises returned to be chained:
getItems() {
 return new Promise((resolve, reject) => {
  this.doSomething()
   .then((rs) => {
    . . .
    return Promise.resolve(123); 
   })
   .then((rs) => {
    . . .
    return 456;   // this returns a promise as well
   })
   .then((rs) => { 
    . . .
    resolve(result); 
   })
   .catch(error => reject(error));
 });
};


Reference:
Promise - TypeScript Deep Dive

No comments: