⇦ Back

WDX-180

Web Development X

Introduction to Async/Await

Async and await is an elegant way to handle promises. It is easy to understand and it’s clean to write.

const square = async function (n) {
  return n * n
}

square(2)

Promise {<resolved>: 4}

The word async in front of a function means that function will return a promise. The above square function instead of a value it returns a promise.

How do we access the value from the promise? To access the value from the promise, we will use the keyword await.

const square = async function (n) {
  return n * n
}
const value = await square(2)
console.log(value)

4

Now, as you can see from the above example writing async in front of a function create a promise and to get the value from a promise we use await. Async and await go together, one can not exist without the other.

Let us fetch API data using both promise method and async and await method.

• promise

const url = 'https://restcountries.com/v2/all'
fetch(url)
  .then(response => response.json())
  .then(data => {
    console.log(data)
  })
  .catch(error => console.error(error))

• async and await

const fetchData = async () => {
  try {
    const response = await fetch(url)
    const countries = await response.json()
    console.log(countries)
  } catch (err) {
    console.error(err)
  }
}
console.log('===== async and await')
fetchData()

Sources and Attributions

Content is based on the following sources:

• 30 Days Of JavaScript: Promises (Permalink)

Don’t forget to star this awesome repo!

---

Project maintained by in-tech-gration Hosted on GitHub Pages — Theme by mattgraham