How to write better sequential promise calls in angular.js?

Question

What is a clean way to write a code like this? For multiple times I have to use the response of previous request to build a new URL and elastic search query from different sources and tables.

$scope.whatIFinallyWant = {};
$http.get(url1).then(function(response1){
    // creating new url2 & query with response1
    $http.get(url2).then(function(response2){
        // creating new url3 & query with response2
        $http.get(url3).then(function(response3){
            // creating new url4 & query with response3
            $http.get(url4).then(function(response4){
                // using the final response in UI ... 
                $scope.whatIFinallyWant = response4;
            }) 
        }) 
    }) 
})

synchronous promise - Promises are asynchronous by design

Jaromanda X
– Jaromanda X

2017-05-25 23:04:59 +00:00
Commented May 25, 2017 at 23:04 — Jaromanda X
– Jaromanda X, Commented May 25, 2017 at 23:04

Jaromanda X · Accepted Answer · 2017-05-25 23:18:41Z

2

Chain the promises like so

$scope.whatIFinallyWant = {};
$http.get(url1)
.then(function(response1) {
    // creating new url2 & query with response1
    return $http.get(url2);
}).then(function(response2) {
    // creating new url3 & query with response2
    return $http.get(url3);
}).then(function(response3) {
    // creating new url4 & query with response3
    return $http.get(url4);
}).then(function(response4){
    // using the final response in UI ... 
    $scope.whatIFinallyWant = response4;
});

answered May 25, 2017 at 23:18

Jaromanda X

57.1k6 gold badges82 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kamil Wojciechowski · Accepted Answer · 2017-05-26 10:12:19Z

0

Since $http.get() returns resolved data ( please checkout angular docs for it's exact shape: https://docs.angularjs.org/api/ng/service/$http), you might use predefined function to form url and call $http.get():

let makeUrl = (promiseResult) => {
  let url
  /* some logic */
  return $http.get(url);
}

let logErr = (err) => {
    console.error("Whoops! " + err);
}

$http.get(url1)
  .then(makeUrl)
  .then(makeUrl)
  .then(makeUrl)
  .then((finalUrl) => {
     $scope.whatIFinallyWant = finalUrl;
  })
  .catch(logErr)

edited May 26, 2017 at 10:12

answered May 25, 2017 at 21:44

Kamil Wojciechowski

12 bronze badges

2 Comments

DragonKnight Over a year ago

everytime the logic to create a new url and query is very different. not possible to use a function for all of those processes.

Jaromanda X Over a year ago

also, $scope.whatIFinallyWant will be a promise, rather than response4

Collectives™ on Stack Overflow

How to write better sequential promise calls in angular.js?

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related