Combining Multiple Optional Async AJAX Calls

Question

Combining Multiple Optional Async AJAX Calls

In my Angular 1.5.8 app, I have different views that require various combinations of the same 3 ajax requests. Some views need data from all three endpoints, while others only need data from one or two.

To efficiently manage the retrieval of this data, I am developing a function that will ensure each endpoint is called only when necessary. I want the ajax requests to be triggered on demand and no sooner. While I have a working function in place, I believe it can be enhanced further.

The function below resides within the $rootScope. It utilizes the fetchData() function to cycle through the get requests as needed. Once data is fetched, it is stored in the global variable $rootScope.appData and then fetchData() is invoked again. When all required data is obtained, the deferred promise is resolved and the data is returned to the controller.

$rootScope.appData = {};

$rootScope.loadAppData = function(fetch) {
  var deferred = $q.defer();

  function getUser() {
    $http
      .get('https://example.com/api/getUser')
      .success(function(result){
        $rootScope.appData.currentUser = result;
        fetchData();
      });
  }

  function getPricing() {
    $http
      .get('https://example.com/api/getPricing')
      .success(function(result) {
        $rootScope.appData.pricing = result;
        fetchData();
      });
  }

  function getBilling() {
     $http
       .get('https://example.com/api/getBilling')
       .success(function(result) {
         $rootScope.appData.billing = result;
         fetchData();
       });
  }

  function fetchData() {
    if (fetch.user && !$rootScope.appData.currentUser) {
      getUser();
    } else if (fetch.pricing && !$rootScope.appData.pricing) {
      getPricing();
    } else if (fetch.billing && !$rootScope.appData.billing) {
      getBilling();
    } else {
      deferred.resolve($rootScope.appData);
    }
  }

  if ($rootScope.appData.currentUser && $rootScope.appData.pricing &&$rootScope.appData.billing) {
    deferred.resolve($rootScope.appData);
  } else {
    fetchData();
  }

  return deferred.promise;
};

An object fetch is passed as an argument indicating which ajax requests to trigger. For instance, calling $rootScope.loadAppData() with only user and pricing data required would look like this:

$rootScope.loadAppData({user: true, pricing: true}).then(function(data){
   //execute view logic. 
});

I have a few questions:

Could the chaining of functions be optimized? Is fetchData() adequate, or is there a better way to accomplish this functionality?
Is there a method to initiate all necessary Ajax requests simultaneously, yet wait for all calls to finish before resolving the promise?
Is it common practice to store data in the $rootScope?

Note: Error handling is not implemented in this function at present. I plan to incorporate error handling prior to using this code snippet, although it's not directly related to my inquiry.

javascript angularjs asynchronous promise q

Answer 1

Answer №1

Opt for the .then method over the .success method and make sure to return data to its success handler:

function fetchUserPromise() {
    var promise = $http
      .get('https://sample.com/api/getUser')
      .then( function onSuccess(result) {
          //return data for chaining
          return result.data;
      });
    return promise;
}

Switch to using a service instead of relying on $rootScope:

app.service("myService", function($q, $http) {

    this.loadDataForApp = function(options) {

        //Create initial promise
        var promise = $q.when({});

        //Chain from initial promise
        var p2 = promise.then(function(appData) {
            if (!options.userDetails) {
                return appData;
            } else {
                var derivedPromise = fetchUserPromise()
                  .then(function(user) {
                    appData.user = user;
                    //return data for chaining
                    return appData;
                });
                return derivedPromise;
            );
        });

        //chain from p2
        var p3 = p2.then(function(appData) {
            if (!options.pricingInfo) {
                return appData;
            } else {
                var derivedPromise = getPricingPromise()
                  .then(function(pricing) {
                    appData.pricing = pricing;
                    //return data for chaining
                    return appData;
                });
                return derivedPromise;
            );
        });

        //chain from p3
        var p4 = p3.then(function(appData) {
            if (!options.billingInfo) {
                return appData;
            } else {
                var derivedPromise = getBillingPromise()
                  .then(function(billing) {
                    appData.billing = billing;
                    //return data for chaining
                    return appData;
                });
                return derivedPromise;
            );
        });

        //return final promise
        return p4;
    }
});

The provided example sets up a promise with an empty object, then chains three operations. Each operation checks if fetching is required. If necessary, a fetch is performed and the result is added to the appData object; if no fetch is needed, the appData object is passed along to the subsequent operation in the chain.

USAGE:

myService.loadDataForApp({userDetails: true, pricingInfo: true})
  .then(function(appData){
    //execute view logic. 
}).catch(functon errorHandler(errorResponse) {
    console.log(errorResponse);
    throw errorResponse;
});

If any fetch operation fails, the following operations in the chain are bypassed, and the final rejection handler will be triggered.

By utilizing the .then method of a promise which returns a new derived promise, it becomes feasible to establish a chain of promises. Chains of varying lengths can be created seamlessly, as one promise can be resolved with another promise (resulting in a delay of resolution), allowing the postponement or deferment of promise resolution at any point within the chain. This functionality enables the implementation of robust APIs. -- AngularJS $q Service API Reference - Chaining Promises

Answer 2

Opt for the .then method over the .success method and make sure to return data to its success handler:

function fetchUserPromise() {
    var promise = $http
      .get('https://sample.com/api/getUser')
      .then( function onSuccess(result) {
          //return data for chaining
          return result.data;
      });
    return promise;
}

Switch to using a service instead of relying on $rootScope:

app.service("myService", function($q, $http) {

    this.loadDataForApp = function(options) {

        //Create initial promise
        var promise = $q.when({});

        //Chain from initial promise
        var p2 = promise.then(function(appData) {
            if (!options.userDetails) {
                return appData;
            } else {
                var derivedPromise = fetchUserPromise()
                  .then(function(user) {
                    appData.user = user;
                    //return data for chaining
                    return appData;
                });
                return derivedPromise;
            );
        });

        //chain from p2
        var p3 = p2.then(function(appData) {
            if (!options.pricingInfo) {
                return appData;
            } else {
                var derivedPromise = getPricingPromise()
                  .then(function(pricing) {
                    appData.pricing = pricing;
                    //return data for chaining
                    return appData;
                });
                return derivedPromise;
            );
        });

        //chain from p3
        var p4 = p3.then(function(appData) {
            if (!options.billingInfo) {
                return appData;
            } else {
                var derivedPromise = getBillingPromise()
                  .then(function(billing) {
                    appData.billing = billing;
                    //return data for chaining
                    return appData;
                });
                return derivedPromise;
            );
        });

        //return final promise
        return p4;
    }
});

The provided example sets up a promise with an empty object, then chains three operations. Each operation checks if fetching is required. If necessary, a fetch is performed and the result is added to the appData object; if no fetch is needed, the appData object is passed along to the subsequent operation in the chain.

USAGE:

myService.loadDataForApp({userDetails: true, pricingInfo: true})
  .then(function(appData){
    //execute view logic. 
}).catch(functon errorHandler(errorResponse) {
    console.log(errorResponse);
    throw errorResponse;
});

If any fetch operation fails, the following operations in the chain are bypassed, and the final rejection handler will be triggered.

By utilizing the .then method of a promise which returns a new derived promise, it becomes feasible to establish a chain of promises. Chains of varying lengths can be created seamlessly, as one promise can be resolved with another promise (resulting in a delay of resolution), allowing the postponement or deferment of promise resolution at any point within the chain. This functionality enables the implementation of robust APIs. -- AngularJS $q Service API Reference - Chaining Promises

Answer 3

Answer №2

Recently discovered an efficient method to tackle question 2 in the original post. By utilizing $q.all(), it enables promises to run concurrently, resolving only when all are completed successfully or failing immediately if one of them encounters an error. With valuable guidance from @georgeawg, I have incorporated this approach into a service. Take a look at my revised implementation below, which organizes the code into a service and executes all calls simultaneously:

services.factory('appData', function($http, $q) {
    var appData = {};
    var coreData = {};

    appData.loadAppData = function(fetch) {
      var deferred = $q.defer();
      var getUser = $q.defer();
      var getPricing = $q.defer();
      var getBilling = $q.defer();

      if (!fetch.user || coreData.currentUser) {
        getUser.resolve();
      } else {
        $http
          .get('https://example.com/api/getUser')
          .success(function(result){
            coreData.currentUser = result;
            getUser.resolve();
          }).error(function(reason) {
            getUser.reject(reason);
          });
      }

      if (!fetch.billing || coreData.billing) {
        getBilling.resolve();
      } else {
         $http
           .get('https://example.com/api/getBilling')
           .success(function(result) {
             coreData.billing = result;
             getBilling.resolve();
           }).error(function(reason) {
             getBilling.reject(reason);
           });
      }

      if (!fetch.pricing || coreData.pricing) {
        getPricing.resolve();
      } else {
         $http
           .get('https://example.com/api/getPricing')
           .success(function(result) {
             coreData.pricing = result;
             getPricing.resolve();
           }).error(function(reason) {
             getPricing.reject(reason);
           });
      }

      $q.all([getPricing.promise, getUser.promise, getBilling.promise]).then(function(result) {
        deferred.resolve(coreData);
      }, function(reason){
        deferred.reject(reason);
      });

      return deferred.promise;
    };

    return appData;
  });

Answer 4

Recently discovered an efficient method to tackle question 2 in the original post. By utilizing $q.all(), it enables promises to run concurrently, resolving only when all are completed successfully or failing immediately if one of them encounters an error. With valuable guidance from @georgeawg, I have incorporated this approach into a service. Take a look at my revised implementation below, which organizes the code into a service and executes all calls simultaneously:

services.factory('appData', function($http, $q) {
    var appData = {};
    var coreData = {};

    appData.loadAppData = function(fetch) {
      var deferred = $q.defer();
      var getUser = $q.defer();
      var getPricing = $q.defer();
      var getBilling = $q.defer();

      if (!fetch.user || coreData.currentUser) {
        getUser.resolve();
      } else {
        $http
          .get('https://example.com/api/getUser')
          .success(function(result){
            coreData.currentUser = result;
            getUser.resolve();
          }).error(function(reason) {
            getUser.reject(reason);
          });
      }

      if (!fetch.billing || coreData.billing) {
        getBilling.resolve();
      } else {
         $http
           .get('https://example.com/api/getBilling')
           .success(function(result) {
             coreData.billing = result;
             getBilling.resolve();
           }).error(function(reason) {
             getBilling.reject(reason);
           });
      }

      if (!fetch.pricing || coreData.pricing) {
        getPricing.resolve();
      } else {
         $http
           .get('https://example.com/api/getPricing')
           .success(function(result) {
             coreData.pricing = result;
             getPricing.resolve();
           }).error(function(reason) {
             getPricing.reject(reason);
           });
      }

      $q.all([getPricing.promise, getUser.promise, getBilling.promise]).then(function(result) {
        deferred.resolve(coreData);
      }, function(reason){
        deferred.reject(reason);
      });

      return deferred.promise;
    };

    return appData;
  });

Combining Multiple Optional Async AJAX Calls

Answer №1

Answer №2

Similar questions

Sharing models between AngularJS controllers

Tips for creating a custom script in my React Native application

How can I dynamically populate a select menu in HTML without the need to submit any data

The fading effects are not functioning as expected in the following code

Display fixed information in a separate tab using express and ejs

Using JavaScript to create CSS animations triggered on hover

What is the process for removing a key from an object and replacing it with its corresponding value?

Tips for coordinating the execution of 2 async.waterfalls in Node.js

Trigger JavaScript when a specific division is loaded within a Rails 4 application

Instead of using setTimeout in useEffect to wait for props, opt for an alternative

Selecting a date in Jade's date picker

Navigating through options in angularjs with a dropdown for effective searching

If the PHP variable evaluates to true, then a CJuiDialog in Yii view will open

It is imperative that the HTML div element remains within the boundaries of the page

Issue encountered with the triggerWord <input> and JavaScript

Manipulate values within an array when a checkbox is selected or deselected

The resize function triggers twice as many events with each window resize

The index-hml-webpack-plugin is throwing an error: EISDIR - attempting to read from a directory, which is an illegal

Can you share any recommendations or instances of modifying data within HTML tables using Laravel?

Troubleshooting unexpected issues with dynamically updating HTML using innerHTML