Calling http.get one after the other without knowing the length of the list

Question

Calling http.get one after the other without knowing the length of the list

Suppose I have a list of URLs as follows:

var myurls = ['http://server1.com', 'http://server2.com', 'http:sever2.com', etc ]

Each URL is considered a "fallback" and should only be used if the previous one is unreachable. This list establishes a priority order. Let's also assume that this list can vary in length - its size is unknown and needs to be iterated through.

How can I write a function, named "reachability", that loops through this array and returns the first server that can be reached?

I cannot use $http.all since it executes requests in parallel. Additionally, running a while loop with an $http.get within it is not feasible because the response may be delayed, causing the user interface to freeze in the meantime.

It's worth mentioning that jQuery is not being utilized; instead, Ionic framework, which includes a version of jQuery-lite, is being used.

While many examples propose chaining promises using .then, this approach assumes prior knowledge of the number of URLs, which is not the case here.

Thank you.

javascript angularjs promise

Answer 1

Answer №1

To simplify the process, iterate over the array:

myurls.reduce((previous, currentUrl) => previous.catch(() => http.get(currentUrl).then(() => currentUrl)),
              Promise.reject());

Explanation of the Flow:

This method is based on a common pattern where reduce is used to create a promise chain. For example:

[func1, func2].reduce((p, f) => p.then(f), Promise.resolve());

which is equivalent to

Promise.resolve().then(func1).then(func2)

(the last argument in reduce acts as the initial value).

In your scenario, since you are attempting retry on failure, it is necessary to construct a retry (or reject) chain by starting with Promise.reject() instead. Hence,

Promise.reject().catch(func1).catch(func2)

Answer 2

To simplify the process, iterate over the array:

myurls.reduce((previous, currentUrl) => previous.catch(() => http.get(currentUrl).then(() => currentUrl)),
              Promise.reject());

Explanation of the Flow:

This method is based on a common pattern where reduce is used to create a promise chain. For example:

[func1, func2].reduce((p, f) => p.then(f), Promise.resolve());

which is equivalent to

Promise.resolve().then(func1).then(func2)

(the last argument in reduce acts as the initial value).

In your scenario, since you are attempting retry on failure, it is necessary to construct a retry (or reject) chain by starting with Promise.reject() instead. Hence,

Promise.reject().catch(func1).catch(func2)

Answer 3

Answer №2

If you're looking for a solution that involves recursion and chaining, consider the following approach:

const findFirstReachableUrl = (urls) => {
  if (urls.length > 0) {
    return $http.get(urls[0]).then(() => {
      return urls[0];
    }).catch(() => {
      return findFirstReachableUrl(urls.slice(1));
    });
  } else {
    return $q.reject("No reachable URL");
  }
}

To use this function, make the following call:

findFirstReachableUrl(myurls).then((firstReachableUrl) => {
  // Success: perform actions with firstReachableUrl
}, () => {
  // Failure: unable to reach any URLs
});

Answer 4

If you're looking for a solution that involves recursion and chaining, consider the following approach:

const findFirstReachableUrl = (urls) => {
  if (urls.length > 0) {
    return $http.get(urls[0]).then(() => {
      return urls[0];
    }).catch(() => {
      return findFirstReachableUrl(urls.slice(1));
    });
  } else {
    return $q.reject("No reachable URL");
  }
}

To use this function, make the following call:

findFirstReachableUrl(myurls).then((firstReachableUrl) => {
  // Success: perform actions with firstReachableUrl
}, () => {
  // Failure: unable to reach any URLs
});

Calling http.get one after the other without knowing the length of the list

Answer №1

Explanation of the Flow:

Answer №2

Similar questions

Toggle the visibility of table rows using checkboxes

Do JavaScript Promises operate asynchronously?

Tips for positioning the labels in a sankey diagram for optimal alignment

Why are NodeJS and Jade/Pug variables not being recognized in the Jade script?

Initiate a timer with intervals of 3 seconds upon reaching a designated section in a React application

AngularJS: Getting language details in AngularJS based on language code

AngularJS continuously updates and adds results to a list using long polling techniques

Oops! There seems to be an error in the code: SyntaxError: DOM Exception 12 setRequestHeader@[

Setting environmental variables throughout your application using create-react-app on the front end

Issues with sending parameters in JQuery Ajax POST request

Tips for verifying the input field with specific requirements in Angular 6

"Enhancing User Experience with Animated Progress Bars in Three.js

Ways to access the files attribute in an input tag in AngularJS without relying on getElementById

Placing a dropdown menu on top of an image

Node.js encountering issue with printing an array

What is the best way to adjust the placement of a component to remain in sync with the v-model it is connected to?

Implementing pagination within nested ng-repeat in Angular app

The jquery error NS_ERROR_XPC_BAD_CONVERT_JS is causing issues on Google Chrome while working fine on Firefox

Getting JSON values from Angular and storing them in MongoDB is a straightforward process. Here

Creating a jQuery alert similar to Stack Overflow's and integrating it with server-side functionality