java script promises lingo

Question

I'm new to promises, so apologize for the newbie question. Inside my function, I have the following lines (middle of the function):

...
const retPromise = await buildImgs(file, imgArray);
retPromise.then(async function () {
       console.log("completed build imgs");
       ...

My assumption was that the "then" from the promise would not execute until the await was completed. but alas, it is acting like sync code, and the retPromise evaluating the "then" before the buildImgs is completed (as measured by my console.log flows). The result is an undefined retPromise.

please help...what am I missing in the concept?

OK: after feedback, let me explaing further my question: I am trying to understand this async/sync flow and control concept:

const retVal = somefunc();
console.log(retVal);

const retVal = await somefunc();
console.log(retVal);

in the first case, if I understand sync / async code correctly, then I should have a possibility that retVal is undefined when the console.log finds it...

in the second case, I thought it would stop flow until that point that somefunc() completes, then the flow would continue. However my reading seems to indicate it will still try to run the console.log message as a parallel thread. So this leads me to believe I would need to put the console.log inside of the.then after somefunc. Which leads me to promises. So I made a promise return, which I see happening.

However, the.then, as in my original post code, seems to post the console message "completed build imgs", before code inside my buildImgs completes (measured by time I know the function to take, and also console messages inside the buildImgs to help me with sequencing)

so it seems to me I am still missing a fundamental on how to block flow for async code. :(

Answer 1

When you use await construction the script waits until the promise resolves and return to your retPromise value from this promise. So in this case better to choose one. Remove await and keep then , or keep await and use retPromise value.

Answer 2

Assuming that buildImgs is actually returning a promise (example)

const buildImgs = (file, imgArray) => {
  return new Promise((resolve, reject) => {
    try {
      // ...
      resolve()
    } catch (err) {
      reject(err)
    }
  })
}

When you call await on a promise its already waiting for the promise to complete, if you remove the await on the call then you can use .then

there are two ways to write promise handlers, the older way looks like this

buildImgs(file, imgArray)
  .then(() => {
    console.log('im done')
  })
  .catch(err => {
    console.error(err)
  })

and the newer syntax

// you must declare "async" in order to use "await"
const asyncFunction = async () => {
  try {
    await buildImgs(file, imgArray)
    console.log('im done')
  } catch(err) {
    console.error(err)
  }
}
asyncFunction()

if you need the return value from the promise, then you would assign it to a variable

const ineedResponse = await buildImgs(file, imgArray)
console.log(ineedResponse)

// or

buildImgs(file, imgArray)
  .then(ineedResponse => {
    console.log(ineedResponse)
  })
  .catch(err => {
    console.error(err)
  })