There is a special syntax to work with promises in a more comfortable fashion called async/await. It's surprisingly easy to understand and use.
Let's start with the async keyword. It can be placed before a function, like this.
async function f() {
return 1;
}
The word async before a function means one simple thing: a function always returns a promise. Other values are wrapped in a resolved promise automatically.
For instance, this function returns a resolved promise with the result of 1; let's test it.
async function f() {
return 1; === return Promise.resolve(1);
}
f().then(alert); // 1
So, async ensures that the function returns a promise, and wraps non-promises in it. There is another keyword, await, that works only inside async functions.
let value = await promise;
The keyword await makes JavaScript wait until that promise settles and returns its result. Here's an example with a promise that resolves in 1 second:
async function f() {
let promise = new Promise((resolve, reject) => {
setTimeout(() => resolve("done!"), 1000)
});
let result = await promise; // wait until the promise resolves (*)
alert(result); // "done!"
}
f();
The function execution "pauses" at the line (*) and resumes when the promise settles, with result becoming its result. So the code above shows "done!" in one second.
Let's emphasize: await literally suspends the function execution until the promise settles, and then resumes it with the promise result. That doesn't cost any CPU resources, because the JavaScript engine can do other jobs in the meantime: execute other scripts, handle events, etc.
It's just a more elegant syntax of getting the promise result than promise.then. And, it's easier to read and write.