Javascript Promise chain not executing next then()

Question

Here's my example code:

function recursiveFetch(num) {
    // EXAMPLE that recursivley fetches all todos from example API
    return new Promise(resolve => {
        fetch("https://jsonplaceholder.typicode.com/todos/" + num)
            .then((response) => {
                return response.json();
            })
            .then((data) => {
                if (num == 0) {
                    console.log("Done getting TODOs");
                    resolve(num);
                } else {
                    recursiveFetch(num - 1);
                }
            });
    });
}

new Promise(resolve => {
        // Just using this for this example
        resolve(10);
    })
    .then((num) => {
        // This runs fine and returns a promise which is eventually resolved
        return recursiveFetch(num);
    })
    .then((num) => {
        // This never happens?
        console.log("num is now " + num);
    })

I can't tell why but the second .then is never run.

If I execute this code in the Firefox console I get the output Done getting TODOs but the "num is now " log is never called?

Try adding a `.catch` to see if there are any errors. (also, best to avoid the explicit Promise construction antipattern). You also aren't calling `resolve` in the `else`, the Promise will hang forever in that case — CertainPerformance, Aug 29 '19 at 14:49
@DanielA.White If I remove the `new Promise` line and the `resolve`, I get this output: `num is now undefined` `Done getting TODOs`, like it's just skipping the fact that it's a promise — psidex, Aug 29 '19 at 14:54
Yes, according with [Daniel A. White](https://stackoverflow.com/users/23528/daniel-a-white)... `fetch` is a promise by default... it's not necessary do a promise of another promise. — Christian Carrillo, Aug 29 '19 at 14:56

score 1 · Accepted Answer · answered Aug 29 '19 at 15:01

To fix your code as it is, you need

recursiveFetch(num - 1).then(resolve)

However, there are quite a few mistakes, how about this cleaned-up one:

async function fetchAll(num) {
  let data = [];
  for (let i = 1; i <= num; i++) {
    let t = await fetch("https://jsonplaceholder.typicode.com/todos/" + i);
    data.push(await t.json())
  }
  return data;
}

Promise
  .resolve(3)
  .then(fetchAll)
  .then(console.log)

score 1 · Answer 2 · answered Aug 29 '19 at 15:09

You need to add a resolve inside the "else" when you call recursively the function "recursiveFecth". Since the function is returning another promise you need to resolve then, otherwise it will exit inmediately.

I've tried it and it works:

function recursiveFetch(num) {
    // EXAMPLE that recursivley fetches all todos from example API
    return new Promise(resolve => {
        fetch("https://jsonplaceholder.typicode.com/todos/" + num)
            .then((response) => {
                return response.json();
            })
            .then((data) => {
                if (num == 0) {
                    console.log("Done getting TODOs");
                    resolve(num);
                } else {
                    resolve(recursiveFetch(num - 1));
                }
            });
    });
}

new Promise(resolve => {
        // Just using this for this example
        resolve(10);
    })
    .then((num) => {
        // This runs fine and returns a promise which is eventually resolved
        return recursiveFetch(num);
    })
    .then((num) => {
        // This never happens?
        console.log("num is now " + num);
    })

score 0 · Answer 3 · answered Aug 29 '19 at 15:01

You need to return the recursiveFetch in the inner promise

...
.then((data) => {
            if (num == 0) {
                console.log("Done getting TODOs");
                resolve(num);
            } else {
                return recursiveFetch(num - 1);
            }
        });

Javascript Promise chain not executing next then()

3 Answers3