What is Async and Await?

What is async and await?

Handling asynchronous actions in JavaScript was originally done using callback functions. But the ES6 version of JavaScript introduced Promises and the .then() and .catch() syntax.

After ES6, the JavaScript language has continued to evolve and provide even more ways of handling asynchronous actions, like async and await. This new syntax allows developers to treat asynchronous code as if it were synchronous and write cleaner code without getting caught up in chaining .then()s and .catch()s. Take a look below, the first example is using the .then() method:

myPromise()
  .then((resolvedValue) => {
    console.log(resolvedValue);
  });

to clipboard
Copy to clipboard

Now compare it with using async and await:

const myAsyncFunc = async () => {
  let resolvedValue = await myPromise();
  console.log(resolvedValue);
};

to clipboard
Copy to clipboard

Both code snippets do the same thing! The async keyword makes the function capable of handling asynchronous code, that has the await keyword. Both keywords are syntactic sugar — it doesn’t introduce new functionality into the language, it makes it slightly easier to write and read. In this course, Build a Professional Website with Wix, we’ll be using the .then() and .catch() syntax to teach asynchronicity but we still wanted to introduce async and await for your web development progress.

So the choice is yours. If you want to learn more about this cool ES6 feature and get into the pros and cons continue on to the lesson and quiz. Otherwise, you can go straight to learning about the backend!