Парадигма async/await
продолжает доминировать в сообществе JavaScript с момента ее изобретения. Функция async
, созданная из встроенного (хотя и не глобального) объекта JavaScript AsyncFunction (или конструктора, если можете), предлагает новую итерацию (написание) асинхронных функций в JavaScript.
Если вы хотите обсудить async/await
и promises
, любезно сделайте это в этом сообщении в блоге, поскольку в этом руководстве не предпринимаются попытки различить / противопоставить их. Однако я должен упомянуть, что они не исключают друг друга, а скорее дополняют друг друга: async/await
основывается на Promises
, а Promises
использует callbacks
.
Несколько фактов о функциях async / await
- Декларация:
Утвержденный синтаксис для асинхронных функций помещает ключевое слово async
перед функцией.
Пример, показывающий объявление функции и выражения функций.
async function greeting() { return 'Hello, world!'; } const greeting = async() => 'Hello, World';
Из приведенного выше примера только интерпретатор
2. Всегда возвращайте обещание
Независимо от того, используете ли вы стрелочную функцию или именованную функцию - синтаксис показан выше - async
function всегда будет возвращать обещание.
async function sayHello(name) { return `Hello, ${name}`; } console.log(sayHello('Harry')); // returns "Promise { 'Hello, Harry' }"
3. Доступ к возвращаемому значению может получить await
или then/catch
Пример: использование ключевого слова await
по сравнению с then()
.
async function test() { const greeting = await sayHello('Harrison'); console.log(greeting); } test(); // returns "Hello, Harrison" /* * NB: Failure to use "await" keyword in the above function * returns a promise! */ sayHello('Harrison').then(res => console.log(res)); // returns "Hello, Harrison"
4. Ключевое слово await
синтаксически корректно только при использовании внутри async function
function test() { const greeting = await sayHello('Harrison'); console.log(greeting); } test(); // throws this error: "SyntaxError: await is only valid in async function"
5. Разрешенное значение по-прежнему не будет равняться возвращенному значению
const resolvedValue = Promise.resolve('Hello, Harrison'); const computedValue = async () => resolvedValue; async function testTwo() { const returnedValue = computedValue(); console.log(returnedValue === resolvedValue); // false }
А теперь перейдем к последнему пункту ...
Лучшие практики для написания отличного кода async / await
- Обработка ошибок
Блок try/catch
может использоваться для обработки асинхронных ошибок в функции async
.
async function testThree() { try { const data = Promise.reject(new Error('Try again later')); await data; } catch (error) { console.log(error.message); // 'Try again later' } }
Ссылаясь на тот факт, что функция async
всегда возвращает обещание, можно выбрать использование .catch()
вместо всего блока try/catch
.
async function test() { return 'Hello, world!'; } test().catch();
Стоит отметить, что если у вас есть обычная функция обработки ошибок, лучше использовать .catch()
вместо try/catch
:
// refrain from: async function testFour() { try { } catch (error) { commonErrorHandler(error); } } // instead use async function testFour() { /** Your code here */ } testFour().catch(commonErrorHandler);
2. Нет необходимости явно возвращать обещание в асинхронной функции
Возвращаясь к приведенным выше фактам, функция async
всегда возвращает обещание. Следовательно, создание обещания внутри async
функции только увеличивает производительность вашего программного обеспечения.
// DON'T DO THIS!! It's simply unnecessary! async function test() { return Promise.resolve('Hello, world'); }
Часто задаваемые вопросы
await
блокирует?
НЕТ! это не блокирует. Пример ниже:
Является ли async-await лучше, чем callbacks
.
Конечно! Попробуйте это!
Но с async/await
ошибка действительно обнаруживается:
Бонус
Некоторые люди обращаются ко мне с такими вопросами, как:
Почему появляется `[object Object]`, когда я пытаюсь выйти из системы для объекта в строке?
Пример:
const profile = { name: 'Harrison', age: 30 }; console.log(`Hey there! See my profile: ${profile}`); // this gives them: // 'Hey there! See my profile: [object Object]'
Объяснение:
Вы пытаетесь преобразовать объект в String, а JS вам отказывает.
Что, если я все еще хочу этим заниматься?
Затем JSON.stringify()
ваш объект превратит его в строку!
console.log(`Hey there! See my profile: ${JSON.stringify(profile)}`); // 'Hey there! See my profile: {"name":"Harrison","age":30}'
Что еще JSON.stringify()
может для меня сделать?
Просто чтобы назвать одно: определение эквивалентности двух массивов! Https://repl.it/@HarrisonKamau/arrayDeepEquation
Спасибо, что уделили время, прочитав это! Увидимся в следующий раз.