How to chain promises together in JavaScript

Question

I'm trying to chain a sequence of Promises so that the second promise will start after the first one resolves and so on. I don't understand how I cannot get it to work correctly.

Here is my demo code:

    const promise1 = new Promise((resolve, reject) => { setTimeout(resolve, 5000, 'a'); });
    const promise2 = new Promise((resolve, reject) => { setTimeout(resolve, 5000, 'b'); });
    const promise3 = new Promise((resolve, reject) => { setTimeout(resolve, 5000, 'c'); });

    promise1.then(val => {
      console.log('promise 1', val);
      promise2.then(val2 => {
        console.log('promise 2', val2);
        promise3.then(val3 => {
          console.log('promise 3', val3);
        });
      });
    });

So what I expected from this code goes like this:

--- 5 seconds passes ---
// console outputs: 'promise 1a'
--- 5 seconds passes ---
// console outputs: 'promise 2b'
--- 5 seconds passes ---
// console outputs: 'promise 3c'

But instead what happens:

--- 5 seconds passes ---
// console outputs: 'promise 1a'
// console outputs: 'promise 2b'
// console outputs: 'promise 3c'

Why is this so? Why are all three promises triggered at the same time?

The `promise` body runs immediately upon creation. The `then()` only determines what will happen once the promise has been resolved, it doesn't execute it. — haim770, Sep 03 '20 at 12:52
There are many questions about this behavior; See [How can I execute array of promises in sequential order?](https://stackoverflow.com/q/20100245/215552) — Heretic Monkey, Sep 03 '20 at 13:00

spender · Accepted Answer · 2020-09-03T13:23:05.303

For the purposes of explaining why they all finish at the same time, we can ignore everything except the promise declarations:

const promise1 = new Promise((resolve, reject) => { setTimeout(resolve, 5000, 'a'); });
const promise2 = new Promise((resolve, reject) => { setTimeout(resolve, 5000, 'b'); });
const promise3 = new Promise((resolve, reject) => { setTimeout(resolve, 5000, 'c'); });

These promises are created HOT (i.e. the handler passed to the constructor is immediately invoked), and were all created at the same time. It follows that the setTimeout within will fire in 5 seconds time, no matter how they are subsequently used.

How they are used subsequently is incidental to this, however, to get your example working, it might be better to write functions that return Promise when called... so:

const getPromise1 = () => new Promise((resolve, reject) => {
  setTimeout(resolve, 5000, 'a');
});
const getPromise2 = () => new Promise((resolve, reject) => {
  setTimeout(resolve, 5000, 'b');
});
const getPromise3 = () => new Promise((resolve, reject) => {
  setTimeout(resolve, 5000, 'c');
});

getPromise1().then((val1) => {
  console.log(val1);
  return getPromise2(); //by returning Promise, you can avoid deep nesting
}).then((val2) => {
  console.log(val2);
  return getPromise3();
}).then((val3) => {
  console.log(val3);
});

In answer to comment, it might be better to have an array of arguments that are used to feed to a Promise-returning function, then to use async/await to write a function that calls the Promise-returning function in sequence

const getPromise = (v) => new Promise((resolve, reject) => {
  setTimeout(resolve, 5000, v);
});

async function run(params) {
  for (const p of params) {
    const returnVal = await getPromise(p);
    console.log(returnVal);
  }
}

run(['a', 'b', 'c']);

Okej. I understand so far. But now for example what if I wan't to have an array of promises that would execute in the same way as in your example? Do I need to create array of functions which return a promise??? — Dustexe, Sep 03 '20 at 13:08
@Dustexe See my edit. Difficult to know your exact circumstances, but hopefully steers you in right direction. — spender, Sep 03 '20 at 13:23

score 0 · Answer 2 · answered Sep 03 '20 at 13:04

0

Promises starts immediately after you declare it and the .then() function is just a "onResolve" event, ie, is called when the promise is resolved. To do what you want, you'll need to use 5, 10 and 15 seconds timeout.

If you want something that's started only when something call it, look for RxJS. It's a great library that have some useful functions to resolve and chain responses. RxJS creates observables that only starts when something subscribe to it.

answered Sep 03 '20 at 13:04

Augusto César Bisognin

121
1
6

Yes I understand this now after @spender pointed it out. Since I use angular I think I can use Subjects as well which should probably solve my needs as well. I don't know why I started with promises in the first place. – Dustexe Sep 03 '20 at 13:14
`I don't know why I started with promises in the first place` - because lots of async code uses them ... they are the future (see what I did there) – Jaromanda X Sep 03 '20 at 14:08
async/await are great, but sometimes you might want to "prepare" data before fetch it, and the `pipe()` operations available on Observables can be very usefull. If you are using Angular, there's no reason to don't read a little about it. It can offer a great way to abstract and/or generify some functions. – Augusto César Bisognin Sep 04 '20 at 18:39

How to chain promises together in JavaScript

2 Answers2