Основы JavaScript в Проектировании динамических страниц - Асинхронные функции

Существует специальный синтаксис для работы с промисами, который называется «async/await». Он удивительно прост для понимания и использования. По сути, и возник для того, чтобы упростить работу с промисами. Это асинхронная функция. Для понимания работы асинхронной функции необходимо разобраться с двумя понятиями: async и await.

Async

Начнём с ключевого слова async. Оно ставится перед функцией, вот так:

async function f() {
  return 1;
}

У слова async один простой смысл: эта функция всегда возвращает промис. Значения других типов оборачиваются в завершившийся успешно промис автоматически.

Например, эта функция возвратит выполненный промис с результатом 1:

async function f() {
  return 1;
}

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

async является гарантией того, что эта функция вернёт промис.

Await

Ключевое слово await заставит интерпретатор JavaScript ждать до тех пор, пока промис справа от await не выполнится. После чего оно вернёт его результат, и выполнение кода продолжится.

Пример использования:

    async fetchUsers() {
        const data = await axios.get(
            "https://jsonplaceholder.typicode.com/users"
        );
        console.log(data);
    },

Пример использования в блоке try/catch:

    async fetchUsers() {
      try {
        const data = await axios.get(
            "https://jsonplaceholder.typicode.com/users"
        );
      } catch (error) {
        alert(error);
        console.log(error);
      }
    },