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. :(

Is that an exact quote from actual code? - the `await` operator never returns a promise object, so I wouldn't expect the `then` call to be correct. — traktor, Feb 12 '21 at 06:37
As pointed out, this use of `await` and `then` makes no sense. But even if it did, it’s still entirely possible that the implementation of `buildImgs` is wrong and it’s not correctly resolving its promise if and only if all images are built. We need more code here to help you. — deceze, Feb 12 '21 at 06:45
You did read https://stackoverflow.com/a/23667087/476 and https://stackoverflow.com/a/14220323/476…? — deceze, Feb 12 '21 at 15:55
Fundamentally, *if* `somefunc` returns a promise, then you either do `somefunc().then(ret => console.log(ret))`, or `const ret = await somefunc(); console.log(ret)`. They're both equivalent. The `await` syntax transforms into the `then` syntax. The `await` is simply nicer to write. However, none of this ensures that your promise actually behaves correctly and really only resolves if and when its work is done. It's entirely possible the promise pretends to be done, but then still continues to do work in the background. That's not a problem on the `await` side. — deceze, Feb 12 '21 at 15:58
@deceze, ok thanks. So within the function that returns the promise, it has a few tasks that have themselves some async actions in them. What I did was to wrap the somefunc code body with a return new promoise....my thinking, being that once the code body executes, then the resolve occurs...it returns with the value. — G-Force, Feb 12 '21 at 17:23
ok yes, @deceze, you were right, it was in the somefunc() body...I didn't have the resolve correctly identified and was resolving too early. thanks again!!!! — G-Force, Feb 12 '21 at 17:30

score 0 · Answer 1 · answered Feb 12 '21 at 06:38

0

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.

answered Feb 12 '21 at 06:38

Mike Malyi

983
8
18

edited my original post with more information, and hopefully clarity on the concept I am missing. Thanks for replies so far guys. – G-Force Feb 12 '21 at 15:41

alilland · Answer 2 · 2021-02-12T07:10:35.187

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

java script promises lingo

2 Answers2