Асинхронный код может быть расстраивающим, когда его поведение не полностью понято. В JavaScript, .then () и ждать являются наиболее часто используемыми функциями для обработки асинхронной природы Обещание Отказ Я хотел бы взять на себя удар по демистификации некоторых из причудов, которые делают JavaScript «Странно», чтобы помочь нам в полной мере воспользоваться асинхроникостью.
При изучении всех о fetch () и Обещание fetch () Возвращает, я был представлен JavaScript’s .тогда () Функция как средство обращения с асинхронной природой Обещание Отказ Итак, какая сделка с async и Ждите ? Это просто синтаксический сахар, чтобы избежать .then () обратный ада? Поиск «async vs .then» в Google производит результаты первой страницы, такие как этот Postoverflow Post. . Но, как мы все узнаем о нашем кодированном путешествии, дьявол в деталях …
Для того, чтобы изучить поведение Async-await и тогда Я построил небольшую программу. Во-первых, нам нужно создать базу данных (я использовал JSON-Server ), чтобы сделать наши запросы Fetch.
Затем нам нужно написать две функции, которые практически идентичны для одной детали – нужно использовать тогда а другой должен использовать Async-await Отказ Примите к сведению осторожно размещенные console.log S, как мы отслеживаем их появление в ближайшее время.
К нижней части файла, я добавил два дополнительных console.log S обернуты вокруг моего вызова вышеупомянутой функции, я бегу в отдельности так:
Прежде чем читать дальше, какой заказ будет console.log S выйти? Примите во внимание console.log s в рамках функции себя тоже …
Результаты!
Обратите внимание, как тогда Проходит через всю функцию, а затем продолжает выполнение после вызова функции, прежде чем вернуться к функции для выполнения серии тогда операции после Обещание был решен?
Противоречив это с async/aquan, функция прекращает выполнение в рамках функции, продолжает выполнять другие задачи, которые следуют за его вызовом, прежде чем выйти в обещание по его разрешению; Это поведение будет продолжаться, пока все обещания не будут решены.
Pan Wangperawong, цитируемый ниже, кратко обобщает различия в своем сообщении в блоге, который я рекомендую вам проверить, если вы хотите больше контекста.
async-await.
Полезно использовать, если ваш код работает с обещаниями и должен выполнять последовательно. Из-за блокировки вы можете потерять некоторую способность обработать код параллельно. Я в первую очередь использовал Async-ждут при выполнении запросов API. -Пан Вангперонг
тогда
Если вы разрабатываете свой интерфейс с React.js, типичный корпус использования может быть отображать экран загрузки, пока не возвращается запрос Fetch, а затем с использованием STETSTATE для обновления UI. — Pan Wangperawong
Оригинал: “https://dev.to/kylejb/a-key-difference-between-then-and-async-await-in-javascript-53e9”