Angular Cascade of Multiple Requests

Question

Angular Cascade of Multiple Requests

I am currently working on a project where I need to develop a service that can take CSV data, convert it into rows, and then make API requests for each row, adding the formatted results to an output string.

To explain further, my code (written in Coffeescript) looks something like this:

  $s.batchFetch = ->
    return unless $s.csv
    $s.output = ''
    for row in $s.csv.split("\n")
      $s._addToOutput(row)

The $s._addToOutput() function is responsible for making an API call with each row, formatting the response, and appending it to the output string ($s.output). Here is a simplified version of how it works:

$s._addToOutput (row) = -> 
  formattedResponse = ''
  $http.get("api/request/path/row-specific-whatever")
    .success (res) ->
      formattedResponse = $s._format(res)
    .then ->
      $s.output += formattedResponse

The issue at hand is that the order of the responses added to the output string seems random. It appears that the speed of the API responses varies, causing responses to be added out of order based on when they are received -- rather than following the original order of the rows.

I believe that using Angular promise chaining could potentially solve this problem, as shown here:

$s._addToOutput(row).then ->
  $s._addToOutput(secondRow).then ->
    $s._addToOutput(thirdRow).then ->
      ...

However, since the number of incoming rows is unpredictable, I would like a more dynamic solution that allows me to perform API calls for each row sequentially.

If anyone has any suggestions on how to achieve this, I would greatly appreciate the assistance. Thank you!

Sasha

EDIT -- I attempted ryeballar's solution, but unfortunately, it did not resolve the reordering issue. I suspect there may be an error in my implementation, so if anyone notices anything amiss, please let me know:

(Please note, I had to modify the solution slightly due to making two consecutive requests for each row: one for the "venue" and another for the venue's "photo." Also, yamlify essentially means 'format'.)

...

javascript angularjs coffeescript angular-promise angular-http

Answer 1

Answer №1

To utilize the .reduce() method, you can call each promise sequentially. Begin with an initial promise that resolves immediately using $q.when(), then proceed to invoke the next promise rowPromise, creating a chain effect when each subsequent then() is triggered.

.controller('CsvController', function($scope, $q) {

  $scope.csv = '.....';
  $scope._format = function() {/*...*/};

  $scope.batchFetch = function() {
    $scope.output = '';
    return $scope.csv.split('\n').reduce(function(promise, row) {
       return promise.then(function() {
          return $http.get("api/request/path/row-specific-whatever", {row: row})
                          .success(function(res) {
                             $scope.output += $scope._format(res);
                          });
       });
    }, $q.when());
  };

});

UPDATE: Upon reviewing the code, it appears that the current implementation leads to a callback hell issue. Thus, restructuring the code in the following manner may provide a better solution:

$s.batchFetch = function() {
  if (!$s.csv) {
    return;
  }
  $s.output = '';
  return $s.csv.split("\n").reduce(function(promise, row) {
    return promise.then(function() {
       var split = row.split(',');
       return $s._getVenue(split[0], split[1]).success(function(res) {
         var venue = res.response.groups[0].items[0].venue;
         return $s._getPhoto(venue).success(function(resp) {
           var photo = $s._photoUrl(resp);
           return $s.output += $s._yamlify(venue, row, photo);
         });
       });
    });
  }, $q.when());
};

Alternatively, consider structuring the function as follows to avoid cascading callbacks:

$s.batchFetch = function() {
  if (!$s.csv) {
    return;
  }
  $s.output = '';
  return $s.csv.split("\n").reduce(function(promise, row) {
    var split, venue, photo;
    return promise
       .then(function() {
          split = row.split(',');
          return $s._getVenue(split[0], split[1]);
       }).then(function(response) {
          venue = response.data.response.groups[0].items[0].venue;
          return $s._getPhoto(venue);
       }).then(function(response) {
          photo = $s._photoUrl(response.data);
          return $s.output += $s._yamlify(venue, row, photo);
       });
  }, $q.when());
};

Answer 2

To utilize the .reduce() method, you can call each promise sequentially. Begin with an initial promise that resolves immediately using $q.when(), then proceed to invoke the next promise rowPromise, creating a chain effect when each subsequent then() is triggered.

.controller('CsvController', function($scope, $q) {

  $scope.csv = '.....';
  $scope._format = function() {/*...*/};

  $scope.batchFetch = function() {
    $scope.output = '';
    return $scope.csv.split('\n').reduce(function(promise, row) {
       return promise.then(function() {
          return $http.get("api/request/path/row-specific-whatever", {row: row})
                          .success(function(res) {
                             $scope.output += $scope._format(res);
                          });
       });
    }, $q.when());
  };

});

UPDATE: Upon reviewing the code, it appears that the current implementation leads to a callback hell issue. Thus, restructuring the code in the following manner may provide a better solution:

$s.batchFetch = function() {
  if (!$s.csv) {
    return;
  }
  $s.output = '';
  return $s.csv.split("\n").reduce(function(promise, row) {
    return promise.then(function() {
       var split = row.split(',');
       return $s._getVenue(split[0], split[1]).success(function(res) {
         var venue = res.response.groups[0].items[0].venue;
         return $s._getPhoto(venue).success(function(resp) {
           var photo = $s._photoUrl(resp);
           return $s.output += $s._yamlify(venue, row, photo);
         });
       });
    });
  }, $q.when());
};

Alternatively, consider structuring the function as follows to avoid cascading callbacks:

$s.batchFetch = function() {
  if (!$s.csv) {
    return;
  }
  $s.output = '';
  return $s.csv.split("\n").reduce(function(promise, row) {
    var split, venue, photo;
    return promise
       .then(function() {
          split = row.split(',');
          return $s._getVenue(split[0], split[1]);
       }).then(function(response) {
          venue = response.data.response.groups[0].items[0].venue;
          return $s._getPhoto(venue);
       }).then(function(response) {
          photo = $s._photoUrl(response.data);
          return $s.output += $s._yamlify(venue, row, photo);
       });
  }, $q.when());
};

Angular Cascade of Multiple Requests

Answer №1

Similar questions

Acquiring JSON data within a JavaScript function using PHP

When scrolling, a new page loads seamlessly

Passing Headers from NodeJS to Angular

Comparing Two Arrays in AngularJS and Disabling on Identical Cases

How is it possible for this for loop to function properly without the need to pass the incrementing variable

Problem Encountered with Navigation Bar following the Cloning and File Transfer in a React (Next) Project

Error callback not being invoked on save() method in AngularJS service

Displaying AJAX Confirmation in a Popup Window

There is an error in ReactJS: TypeError - _this.props.match is not defined

When working with Node.js, it is important to properly export your Oracle database connection to avoid encountering an error like "TypeError: Cannot read property 'execute

Tips for utilizing a printer to print HTML content in PHP

The edges of the cubemap in THREE.js appear murky

JavaScript utilizing an API to retrieve specific data values

What is the best way to incorporate messages across various channels with a Discord bot?

Arranging a list without using the ng-repeat directive

Issue: The object identified as #<Object> does not contain the 'toUpperCase' method

"Trouble arises when dealing with nested object arrays in Formik and handling changes in a child

incorporating a timer into a JavaScript game

What could be causing my component to not update after I modify the states?

PHP: Communicating Data with JavaScript