Асинхронное ключевое слово

Во-первых, у нас есть ключевое слово async, которое вы ставите перед объявлением функции, чтобы превратить ее в асинхронную функцию. Асинхронная функция — это функция, которая знает, как ожидать возможности использования ключевого слова await для вызова асинхронного кода.

Что это значит?

Давайте разберем приведенное выше утверждение проще. Вы видите, что язык программирования, такой как JavaScript, выполняет все свои функции в однопоточной мудрой операции, это означает, что весь код, который вы написали в своем компиляторе JS, будет выполнять всю написанную строку. код линейным образом или, скажем, сверху вниз от первой строки до последней. Теперь слово async означает, что оно может остановить нормальный поток выполнения управления выполнением и сделать выполнение доступным только после завершения выполнения определенного набора программного кода.

Пример для АСИНХРОНИЧЕСКОЙ функции:

let hello = async function() { return "Hello" };
hello();

Ключевое слово ожидания

Реальное преимущество асинхронных функций становится очевидным, когда вы комбинируете его с ключевым словом ожидание — на самом деле awaitработает только внутри асинхронных функций. Это можно поместить перед любой асинхронной функцией на основе обещаний, чтобы приостановить ваш код в этой строке до тех пор, пока обещание не будет выполнено, а затем вернуть результирующее значение. В то же время другой код, который может ожидать шанса на выполнение, может это сделать.

Вы можете использовать await при вызове любой функции, которая возвращает обещание, включая функции веб-API.

Что это значит?

До сих пор мы узнали, что асинхронная функция может останавливать нормальное выполнение программы и ждать, пока какой-то конкретный код завершит свое выполнение, прежде чем он сможет выполнить свой собственный код. Теперь функция ожидания сообщит, что функция остается в удержание, если предыдущий код не завершил свое выполнение.

Пример для функций ASYNC и AWAIT:

fetch('coffee.jpg')
.then(response => {
  if (!response.ok) {
    throw new Error(`HTTP error! status: ${response.status}`);
  } else {
    return response.blob();
  }
})
.then(myBlob => {
  let objectURL = URL.createObjectURL(myBlob);
  let image = document.createElement('img');
  image.src = objectURL;
  document.body.appendChild(image);
})
.catch(e => {
  console.log('There has been a problem with your fetch operation: ' + e.message);
});

Давайте лучше разберемся, вызвав API в реакции, используя асинхронность и ожидание.

Асинхронный/ожидание в реакции

async componentDidMount() {
    const response = await fetch(`https://api.com/v1/ticker/?limit=10`);
    const json = await response.json();
    this.setState({ data: json });
}

В приведенном выше примере видно, что мы создали функцию (метод жизненного цикла в реакции) с ключевым словом async, которое показывает, что она приостановит свое выполнение, когда какая-то строка кода завершила свое выполнение. Ключевое слово await перед функцией выборки означает, что функция будет ждать до тех пор, пока функция выборки не получит fetchданные ссылки API, и после этого код снова будет ждать, если данные должны быть преобразованы в формат JSON для отображения данных в обычном формате.

Более эффективный способ написания кода в ASYNC и AWAIT

Добавьте блок try/catch:

async componentDidMount() {
    try {
      const response = await fetch(`https://api.com/v1/ticker/?limit=10`);
      const json = await response.json();
      this.setState({ data: json });
    } catch (error) {
      console.log(error);
    }
}

В приведенном выше примере можно заметить, что добавление блока try/catch к приведенному выше коду делает код чище для чтения и обнаружения ошибки, если она возникла во время процесса. Таким образом, весь приведенный выше код сохраняется, а пользовательский tryблок и отлов ошибки хранятся в catchблоке. Чтобы убедиться, что все идет хорошо в соответствии с процессом.

Здесь, в приведенном выше примере, основной код хранится в блоке try, и, как обычно, ключевое слово await играет свою роль ожидания, пока код не получит данные из ссылки API, и тем временем, если произойдет генерация ошибки, часть блока catch будет выполнена, и этот процесс также помогает ускорить выполнение кода.

Вывод

Вот и все — async/await предоставляет хороший, упрощенный способ написания асинхронного кода, который легче читать и поддерживать. async/await работает намного лучше, если поместить его в блок try/catch. Несмотря на то, что на момент написания статьи поддержка браузера была более ограниченной, чем другие механизмы асинхронного кода, стоит изучить и рассмотреть возможность ее использования как сейчас, так и в будущем.