Некоторое время назад я боролся с «асинхронной функцией», которую я сделал. Но в чем была проблема? На самом деле это была не асинхронная функция, это был ПРОСТО асинхронный/ожидающийсинтаксис.
Изучая JS, вы услышите об асинхронности и о том, как старая модель Promise.resolve().then() могла принести нам ад обратного вызова (я не буду говорить об этом в этом тексте, но если вы хотите, дайте мне знать), и как async/await помогает нам избежать этого. После некоторых тестов я столкнулся с похожей ситуацией:
«О, БОЖЕ, ЭТО НЕ АСИНХРОННО», и я долгое время держал в уме, что async/await — это ПРОСТО синтаксический сахар для работы с промисами. Но я был частично не прав, и хочу поделиться с вами почему, но на этот раз на реальном примере.
Хотя мы уже слышали об Fetch API или Axios и о том, как их использовать, я покажу вам пример. Для этого я снова воспользуюсь Chrome DevTools Console и моим любимым API The Cat API (я не спонсор этого сервиса, но котов люблю).
Как видите, я использовал fetch() для выполнения запроса GET к конечной точке API, чтобы он мог вернуть мне данные, представляющие собой массив с определенной фотографией кошки (атрибут URL). Хорошо, но что, если мы вставим в этот код другой console.log?
«О БОЖЕ, ЭТО СНОВА НЕ АСИНХРОННО», и в этом сценарии вам нужно знать важное и концептуальное правило, которое я использовал: функции Async/Await будут асинхронными, ТОЛЬКО ЕСЛИ весь ваш код является асинхронным (связанным с выполнением промисов). Имея это в виду, посмотрите на этот же пример и реорганизуйте функцию с помощью правила:
Игнорируйте undefined, это связано с возвратом функции. Но, как вы можете видеть, знайте, что асинхронный фрагмент кода на самом деле является асинхронным, и хотя мы говорим о небольшом фрагменте кода, это может быть огромный метод, и вы можете не думать об этой ситуации.
Надеюсь, вам понравилось, и если у вас есть какие-то сомнения по этому поводу, позвоните мне по моей ссылке.
