Why is my async function returning a pending promise after await?

Question

I must be missing something here because I do not understand why my promise is not resolving.

I boiled the code down to this simple example:

  ...
  console.log("before");
  const promise = second();
  console.log("after");
  console.log(promise);
  ...

async function first() {
  const p1 = await axios.get("https://<url>");
  console.log("first");
  console.log(p1.data);
  return (p1);
}

async function second() {
  const p2 = await first();
  console.log("second");
  console.log(p2.data);
  return (p2);
};

Which produces this output in the console:

before
after
Promise { <pending> }
first
p1.data
second
p2.data

My understanding is that await pauses execution until it completes before moving to the next line, but that is clearly not happening.

The initial block completes with a pending promise , and then the awaited code in the async functions executes instead of pausing.

What am I missing to make my code pause and wait until the await lines complete with a resolved promise before continuing?

Answer 1

An async function is like a Promise which does not resolve immediately. So you should probably use an immediately invoked anonymous async function:

(async()=>{
  console.log("before");
  const promise = await second();
  console.log("after");
  console.log(promise);
})();

Answer 2

async function is not actually an synchronouse function like we think of, its an promise. So you need to handle it like an promise like:

console.log("before");
second().then(res => {
  console.log("after");
  console.log(res);
});

Answer 3

In JavaScript, all of the following are true:

A promise

• Is a value (can be passed around to functions, assigned to variables, and so on)
• Can be in the resolved , rejected , or pending states
• The thing it resolves to is also a value ( 1 , "foo" , {} , ...)
• Can have .then(...) callbacks chained to it
• Can be await ed

An async function

• Is a function that synchronously returns a promise
• Is a function that asynchronously returns the resolved value of that promise

Hopefully this modified example will make it clearer:

 // mock axios const axios = { get: url => Promise.resolve({ data: `Some data from ${url}` }) } const fetchMockData = async () => { const val = await axios.get('https://<url>') return val } const withAsyncAwait = async () => { console.log('=== with async/await ===') const promise = fetchMockData() // not awaited console.log('type of promise:', promise.constructor.name) const resolved = await promise // here we await it console.log('type of resolved:', resolved.constructor.name) console.log('data:', resolved.data) } // equivalent but with `then` callback const withThenCallback = () => { console.log('=== with then callback ===') const promise = fetchMockData() // not awaited console.log('type of promise:', promise.constructor.name) promise.then(resolved => { // resolved thanks to `then` console.log('type of resolved:', resolved.constructor.name) console.log('data:', resolved.data) }) } setTimeout(withAsyncAwait, 0) setTimeout(withThenCallback, 100)