Async/await

An async function is a function declared with the async keyword, and the await keyword is permitted within them. The async and await keywords enable asynchronous, promise-based behavior to be written in a cleaner style, avoiding the need to explicitly configure promise chains.

"async and await make promises easier to write"

async makes a function return a Promise

await makes a function wait for a Promise

 Async functions

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;

}

f().then(alert); // 1

…We could explicitly return a promise, which would be the same:

async function f() {

  return Promise.resolve(1);

}

f().then(alert); // 1

So, async ensures that the function returns a promise, and wraps non-promises in it. Simple enough, right? But not only that. There’s another keyword, await, that works only inside async functions, and it’s pretty cool.

Await

The syntax:

// 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.

Can’t use await in regular functions

If we try to use await in a non-async function, there would be a syntax error:

function f() {

  let promise = Promise.resolve(1);

  let result = await promise; // Syntax error

}

We may get this error if we forget to put async before a function. As stated earlier, await only works inside an async function.

Let’s take the showAvatar() example from the chapter Promises chaining and rewrite it using async/await:

We’ll need to replace .then calls with await.

Also we should make the function async for them to work.

async function showAvatar() {

  // read our JSON

  let response = await fetch('/article/promise-chaining/user.json');

  let user = await response.json();

  // read github user

  let githubResponse = await fetch(`https://api.github.com/users/${user.name}`);

  let githubUser = await githubResponse.json();

  // show the avatar

  let img = document.createElement('img');

  img.src = githubUser.avatar_url;

  img.className = "promise-avatar-example";

  document.body.append(img);

  // wait 3 seconds

  await new Promise((resolve, reject) => setTimeout(resolve, 3000));

  img.remove();

  return githubUser;

}

showAvatar();

..............................Example..................

Example:

Consider the following code snippet:

const promise1 = () => new Promise((resolve,reject) => {

setTimeout(() => {

resolve("resolved 1!",100)

})

})

const promise2 = () => new Promise((resolve,reject) => {

setTimeout(() => {

resolve("resolved 2!",100)

})

})

function asyncAwait() {

promise1()

.then((result) => {

console.log(result)

return promise2()

})

.then((result) => {

console.log(result)

})

}

asyncAwait()

It can also be written like this using async/await:

const promise1 = () => new Promise((resolve,reject) => {

setTimeout(() => {

resolve("resolved 1!",100)

})

})

const promise2 = () => new Promise((resolve,reject) => {

setTimeout(() => {