11

If I drop into the VSCode debugger in some javascript code and call an asynchronous function with await it just returns a promise. How can I resolve the promise within the debugger so I can see what the result is?

For example, if I define a function like so:

const doAsyncThing = async () => {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve(5)
        }, 1000)
    })
}

Then this happens when I call it in the debugger:

> const result = await doAsyncThing()
Promise {<pending>}
> result
Uncaught ReferenceError: result is not defined
> doAsyncThing().then(r => console.log(r))
Promise {<pending>}
> await doAsyncThing().then(r => console.log(r))
Promise {<pending>}

How can I make it resolve the promise and get me the result within the debugger?

This is not a duplicate of How to debug async/await in visual studio code?

That question appears to be asking how to place a breakpoint within an asynchronous function, while I am trying to actually execute the function from the debugger.

I recreated this question in a new post here since I don't believe it is a duplicate of the above post. This is my first time posting so hopefully that's the right thing to do.

Alex Long
  • 261
  • 2
  • 5
  • 4
    Does this answer your question? [How to debug async/await in visual studio code?](https://stackoverflow.com/questions/37771097/how-to-debug-async-await-in-visual-studio-code) – Danilo Ivanovic Nov 24 '20 at 23:50
  • An asynchronous function returns a promise by definition. There's no result until the promise completes. The editor or debugger don't change that. If you want to get the result you need to await for the promise to complete and process the result - either with `await` or `.then` – Panagiotis Kanavos Nov 25 '20 at 09:10
  • If you tried to debug your script in a browser, a function marked with `async` would still return a promise – Panagiotis Kanavos Nov 25 '20 at 09:11
  • 1
    @DaniloIvanovic Thanks but no, that doesn't answer it. I'm trying to call the function from the debugger, I updated my question to show that. – Alex Long Dec 01 '20 at 17:20
  • 1
    @PanagiotisKanavos Thanks but I've tried using both `await` and `.then` in the debugger but neither resolves the promise. I've updated the question. – Alex Long Dec 01 '20 at 17:21
  • As expected. The problem is your `doAsyncThing` method. It returns a promise that contains another promise. In JavaScript any method marked with `async` returns a promise. *Remove* the `async` keyword to get a single promise. Also check this duplicate question [using setTimeout on promise chain](https://stackoverflow.com/questions/39538473/using-settimeout-on-promise-chain) – Panagiotis Kanavos Dec 01 '20 at 17:49
  • In the duplicate, the `delay()` function returns a `Promise` that will complete once the timeout expires and call the next function in the chain. This is done through `bind` magic and no, I don't know enough JS to understand it either – Panagiotis Kanavos Dec 01 '20 at 17:52
  • An even better duplicate [Combination of async function + await + setTimeout](https://stackoverflow.com/questions/33289726/combination-of-async-function-await-settimeout) – Panagiotis Kanavos Dec 01 '20 at 17:56

2 Answers2

-1

Maybe put an "await" in front of the function call?

spaxxUnited
  • 625
  • 1
  • 7
  • 16
  • Thanks but it still returns a promise even if I do that, see my updated question – Alex Long Dec 01 '20 at 17:23
  • Hmm. I am pretty sure the debugger can only immediately print out the result given statement will return on interpretation. And if there is something asynchronous and/or timeout along the route, it won't "wait" for it, but return what is waiting for it. I just put "setTimeout(() => { console.log(1) }, 1000)" into my debugger. It immediately prints a Timeout object instance. Then 1 second later, the "1" comes. So if you don't get the "5" from your above example, you might want to "Continue (F5)" your debugging session? – spaxxUnited Dec 02 '20 at 00:46
  • "doAsyncThing().then(r => console.log(r) )" here i get the "5" from your example. Since i defined doAsyncThing in a scope, that i put a breakpoint into, after pasting and executing the snippet i need to "Continue (F5)" and wait for the output. – spaxxUnited Dec 02 '20 at 12:25
-1

You can do it like this:

const result = await Promise.resolve("success");
debugger

And then run debugger in VSCode.

wuliu
  • 50
  • 4