Одна из наиболее мощных функций JavaScript - это возможность писать «асинхронные» функции. Чтобы понять это, давайте обратимся к некоторым определениям.

Однопоточный код. JavaScript - это однопоточный язык, что в основном означает, что он может выполнять только одну процедуру за раз. (Подробнее об однопоточных и многопоточных процессах здесь: https://www.tutorialspoint.com/single-threaded-and-multi-threaded-processes)

Порядок, в котором JavaScript выполняет это, определяется стеком вызовов, о котором вы можете узнать больше (https://en.wikipedia.org/wiki/Call_stack), но обычно работает в Процесс Первый пришел, последний ушел, который подробно описан здесь: (https://developer.mozilla.org/en-US/docs/Glossary/Call_stack)

«Код блокировки» против «неблокирующего кода». Код блокировки - это код, выполнение которого невозможно до тех пор, пока не будет завершена каждая операция. Это воплощение «синхронной» функции.

В реплике, которую я написал выше, вы можете видеть, что функция «setTimeout» должна быть завершена, прежде чем мы сможем вывести приветствие на экран.

Получить

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

Нам нужно использовать асинхронную операцию. При доступе к информации из веб-API есть очень полезная функция под названием fetch (). Он возвращает обещание. (Здесь можно найти отличную дополнительную информацию об обещаниях и их развитии https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises).

Вот пример из моего приложения Карты динозавров (https://speckworks.github.io/dinocards_frontend/). Код выглядит так:

Это пример объединения обещаний, поскольку выборка является асинхронной, а затем асинхронно выполняются еще 2 операции (анализ JSON и установка состояния). Как пользователь, когда вы впервые заходите в Приложение, вы можете увидеть:

Хотя это может немного сбить с толку (и, по общему признанию, не лучший UX), это намного лучше, чем альтернатива (большое страшное сообщение об ошибке и нарушение сборки). (Не волнуйтесь, профессиональные программисты, я в свое время напишу «Загрузка троичного оператора».)

Дело в том, что приложение выполнило свои задачи и отрисовало страницу до обещания, возвращенного из API. (.then.then) После каждого из обещаний fetch () return (асинхронно) страница продолжает загружаться, и вы, наконец, увидите:

Так что, если ты потеряешься во всех этих «)» бананах ?? На помощь приходит Async / Await.

Асинхронный… Подождите…

Другой способ написать асинхронный код - использовать синтаксис «async await». Это просто «синтаксический сахар», который позволяет писать функции более «синхронным» способом. Так что не заблудитесь в различных вложенных круглых скобках и фигурных скобках, требуемых синтаксисом .then () в сочетании с нотацией ES6 «(() =› {}) », которую иногда бывает немного сложно отладить.