AngularJS : Pass additional parameters to chained promises

Question

I want to chain some promises that are returned by services. This works, as long as some of the methods that return the promises, doesn't require additional parameters. This is my example:

var first = function() {
  var d = $q.defer();
  $timeout(function() {
    d.resolve("first resolved")
  }, 100)
  return d.promise;
};

var second = function(val) {
  console.log("value of val: ", val);
  var d = $q.defer();
  $timeout(function() {
    d.resolve("second resolved")
  }, 200)
  return d.promise;
};

first().then(second).then(function(value) {
  console.log("all resolved", value);
});

This works as expected. But what if my service second needs an additional parameter val to do it's job? With the method above the value of val is "first resolved", because it get's the resolved value from first.

Is there any way around, without nesting anonymous functions like this:

first().then(function() {
  return second("foobar").then(function(value) {
    console.log("all resolved", value);
  });
});

I was thinking about using $q.all, but IMHO you can't specify an order for your promises.

$timeout already returns a promise, no need for a $q.deferthere — Benjamin Gruenbaum
– Benjamin Gruenbaum, Commented Jul 23, 2014 at 14:09
I know, it was just for demonstration purpose. In my real case, I have a http call and after that, do some processing with the data. So I do need an extra $q.defer — 23tux
– 23tux, Commented Jul 23, 2014 at 14:15
uhh... $http also returns a promise already and you can .then it for the extra processing and return that... can't make a judgement about code I haven't seen but it still sounds like the deferred anti pattern. You only need $q.defer when working against a callback API when promisifying it. — Benjamin Gruenbaum
– Benjamin Gruenbaum, Commented Jul 23, 2014 at 14:16

Razem · Accepted Answer · 2014-07-23 11:59:36Z

10

Of course. First way:

first()
  .then(function() {
    return second("foobar");
  })
  .then(function(value) {
    console.log("all resolved", value);
  });

Second (much easier) way:

first()
  .then(second.bind(null, "foobar"))
  .then(function(value) {
    console.log("all resolved", value);
  });

answered Jul 23, 2014 at 11:59

Razem

1,46111 silver badges14 bronze badges

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

3 Comments

Razem Over a year ago

You're welcome. The important thing is you have to always remember the function can be called only by the promise. So if you need additional parameters or you need to do something with a given value, you have to wrap it or bind it and pass a plain function to the then call. And then the function can return another promise.

Razem Over a year ago

@Mawg In that case you should return an object or an array containing the desired values.

Mawg Over a year ago

Can you show an example, for a Mawg of very little brain? ;-)

Collectives™ on Stack Overflow

AngularJS : Pass additional parameters to chained promises

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related