Парадигма async/await продолжает доминировать в сообществе JavaScript с момента ее изобретения. Функция async, созданная из встроенного (хотя и не глобального) объекта JavaScript AsyncFunction (или конструктора, если можете), предлагает новую итерацию (написание) асинхронных функций в JavaScript.

Если вы хотите обсудить async/await и promises, любезно сделайте это в этом сообщении в блоге, поскольку в этом руководстве не предпринимаются попытки различить / противопоставить их. Однако я должен упомянуть, что они не исключают друг друга, а скорее дополняют друг друга: async/await основывается на Promises, а Promises использует callbacks.

Несколько фактов о функциях async / await

  1. Декларация:

Утвержденный синтаксис для асинхронных функций помещает ключевое слово 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

  1. Обработка ошибок

Блок 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

Спасибо, что уделили время, прочитав это! Увидимся в следующий раз.