const delay = ms => new Promise(res => setTimeout(res, ms));

async function notInstant() {
  await delay(1);
  return 1;
}

(async function() {
 let a = notInstant();
 console.log(a);
 await delay(10000);
 console.log("Still a promise after 10 seconds even though the function only waits for 1 millisecond =>", a);
 a = await a;
 console.log("Printing directly after but now is resolved with the correct value", a);
})();

I know that I shouldn't rely on setTimeout for these kinds of things, but I don't understand why printing the result after 10 seconds still gives an unresolved promise even though the function called only waits for 1 millisecond before returning a value. Then using await makes the result directly available for some reason.

CodePudding user response：

This example illustrates the principle you're observing:

let a = {};
console.log(a);
a.val = 1;
console.log(typeof a); // still an object even though `a` has a value
a = a.val;
console.log(typeof a); // now it's a number

The original promise returned from notInstant will always be a promise. await basically extracts the resolved value from the promise for you. The only reason a ends up being a value in your example is that you're setting it to the result of the await expression.

If you wanted to set a to the result of its promise when it completes, but avoid awaiting it, you could use its then method to affect a state change, like this:

const delay = ms => new Promise(res => setTimeout(res, ms));

async function notInstant() {
  await delay(1);
  return 1;
}

(async function() {
 let a = notInstant();
 console.log(a);
 a.then(n => a = n);
 await delay(1000); 
 console.log("a has its value now; we waited long enough", a);
})();

That's probably not a great pattern to follow (reusing the variable to represent both the promise and the value), but hopefully it helps teach the principle.

CodePudding user response：

from the docs:

The await expression causes async function execution to pause until a Promise is settled (that is, fulfilled or rejected), and to resume execution of the async function after fulfillment. When resumed, the value of the await expression is that of the fulfilled Promise.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await

So, as mentioned by DaveG, with out calling the await, you are just holding the promise

CodePudding user response：

Notice that async functions return a promise.
And you need await to get the value of the promise.

---

here is what MDN says about it:

Async Function's Return value

A Promise which will be resolved with the value returned by the async function, or rejected with an exception thrown from, or uncaught within, the async function.

CodePudding user response：

when you use await function(), the function should return a promise, and if you put await and the result return by that function is not promise the await does not have any effect. so you need to tell js to await for the result and give it a promise when you gonna return in two cases of resolve or reject. check MDN Documention