1

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?

Improve this question
3
  • I think it is better to user async and await Commented Sep 3, 2020 at 12:52
  • 2
    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. Commented Sep 3, 2020 at 12:52
  • 1
    There are many questions about this behavior; See How can I execute array of promises in sequential order? Commented Sep 3, 2020 at 13:00

2 Answers 2

Reset to default
6

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']);

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

2 Comments

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 See my edit. Difficult to know your exact circumstances, but hopefully steers you in right direction.
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.

Improve this answer

3 Comments

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.
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)
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.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.