Javascript error : promiseVariable.then is not a function error

Question

I am new to JavaScript promises. I am trying the following code:

async function handlePromises() {
  var promise1 = new Promise((resolve, reject) => {
    console.log(`Creating promise1 object at ${new Date(Date.now()).toISOString()}`);
    setTimeout(() => {
      resolve(`Promise 1 resolved after 10 seconds at ${new Date(Date.now()).toISOString()}`);
    }, 10000);
  });

  let promise2 = new Promise((resolve, reject) => {
    console.log(`Creating promise2 object at ${new Date(Date.now()).toISOString()}`);
    setTimeout(() => {
      resolve(`Promise 2 resolved after 5 seconds at ${new Date(Date.now()).toISOString()}`);
    }, 5000);
  });

  let promise3 = new Promise((resolve, reject) => {
    console.log(`Creating promise3 object at ${new Date(Date.now()).toISOString()}`);
    setTimeout(() => {
      resolve(`Promise 3 resolved after 3 seconds at ${new Date(Date.now()).toISOString()}`);
    }, 3000);
  });

  let promise4 = new Promise((resolve, reject) => {
    console.log(`Creating promise4 object at ${new Date(Date.now()).toISOString()}`);
    setTimeout(() => {
      resolve(`Promise 4 resolved after 4 seconds at ${new Date(Date.now()).toISOString()}`);
    }, 4000);
  });

  return Promise.all([promise1, promise2, promise3, promise4]);
}
handlePromises();

Now I am trying to call the above function from the call of the following function:

async function handlePromisesUsingAsync() {
  let getPromisesArray = handlePromises();
  getPromisesArray.then((value) => console.log(value));
}

This call prints the output as expected :

But when I change the handlePromisesUsingAsync method definition to the following code(notice the addition of await keyword):

async function handlePromisesUsingAsync() {
  let getPromisesArray = await handlePromises();
  getPromisesArray.then((value) => console.log(value));
}

I get the following error:

Why is this so? Isn't the SAME function returning the SAME fulfilled Promise in both the calls?

score 2 · Accepted Answer · answered Oct 02 '21 at 20:45

2

await will wait for the then-able on its right side to resolve, and then the whole expression will evaluate to that resolved value. For example

(async () => {
  const containsTwo = await Promise.resolve(2);
  console.log(containsTwo);
})();

containsTwo is not a Promise - it's the resolved value that the await section extracted from the Promise.resolve. containsTwo is just a plain number.

Similarly, if you do

let getPromisesArray = await handlePromises();

getPromisesArray is no longer an array of Promises, but an array of resolve values, since you awaited the Promise.all call.

When going through code, you can think of await as turning Promises into what they resolve to, without leaving the Promises behind (unless something else already has a reference to the created Promise).

All you need is

const results = await handlePromises();
console.log(results);

answered Oct 02 '21 at 20:45

CertainPerformance

356,069
52
309
320

Thank u very much for the clear answer. As a JS fresher, I have one more conceptual question(trying to put it all together). Would you please help me understand the following? Question : In the function handlePromises() above, we are creating 4 promise objects one after the another(For this question pls disregard the await keyword used while creating var promise1). But each of these promises are resolving much later in terms of theses initial object creation times. So is it technically safe and correct for me to say : – Amit Dev Oct 03 '21 at 15:34
"The statement let promise2 = new Promise(executor function) executes the executor function immediately after the Promise() constructor creates the object, and returns the created object reference, but that promise and its value is available only after the promise is resolved/rejected(settled) which is happening asynchronously? The promise2 object reference is just an object reference which cannot be used before the promise settles? The Promise() constructor creates an object, executes the executor function immediately, and moves on to create next promise object?" – Amit Dev Oct 03 '21 at 15:34
Yes, the Promise constructor runs immediately. https://stackoverflow.com/a/49911346 The Promise object that is created is available immediately - that's why you can call `.then` on it immediately - but the resolve value is not available until the async request completes - and to consume the resolve value, you need to call `.then` or `await` the Promise. – CertainPerformance Oct 03 '21 at 20:09

Javascript error : promiseVariable.then is not a function error

1 Answers1