В чем разница между обещаниями JavaScript и async await?

Я уже использую функции ECMAScript 6 и ECMAScript 7 (благодаря Babel) в своих приложениях - как мобильных, так и веб-.

Первым шагом, очевидно, был уровень ECMAScript 6. Я изучил множество асинхронных шаблонов, обещаний (которые действительно многообещающие), генераторов (не знаю, почему используется символ *) и т. Д. Из них обещания очень хорошо подходят для моей цели. И я довольно часто использую их в своих приложениях.

Вот пример / псевдокод того, как я реализовал базовое обещание -

var myPromise = new Promise(
    function (resolve,reject) {
      var x = MyDataStore(myObj);
      resolve(x);
    });

myPromise.then(
  function (x) {
    init(x);
});

Шло время, я наткнулся на ECMAScript 7 признаков, и один из них ASYNCи AWAITключевых слов / функции. Все это вместе творит великие чудеса. Я начал заменять некоторые из своих обещаний на async & await. Кажется, они добавляют большую ценность стилю программирования.

Опять же, вот псевдокод того, как выглядит моя функция async, await:

async function myAsyncFunction (myObj) {
    var x = new MyDataStore(myObj);
    return await x.init();
}
var returnVal = await myAsyncFunction(obj);

Не говоря уже о синтаксических ошибках (если таковые имеются), они оба делают то же самое, что я чувствую. Мне почти удалось заменить большинство своих обещаний на async, awaits.

Почему требуется async, await, когда обещания выполняют аналогичную работу?

Решает ли async, await более серьезную проблему? Или это было просто другое решение проблемы обратного вызова?

Как я сказал ранее, я могу использовать обещания и async, ждать решения той же проблемы. Есть ли что-то конкретное, что async await решено?

Дополнительные примечания:

Я широко использую async, awaits и promises в своих проектах React и модулях Node.js. React особенно был ранней пташкой и принял множество функций ECMAScript 6 и ECMAScript 7.

Почему требуется async, await, когда Promises выполняет аналогичную работу? Решает ли async, await более серьезную проблему?

async/awaitпросто дает вам ощущение синхронности в асинхронном коде. Это очень элегантная форма синтаксического сахара.

Для простых запросов и манипулирования данными обещания могут быть простыми, но если вы столкнетесь со сценариями, в которых есть сложные манипуляции с данными и многое другое, легче понять, что происходит, если код просто выглядит так, как будто он синхронный (иными словами, синтаксис сам по себе является формой «случайной сложности», которую async/awaitможно обойти).

Если вам интересно знать, вы можете использовать такую ​​библиотеку co(наряду с генераторами), чтобы создать такое же ощущение. Подобные вещи были разработаны для решения проблемы, которая в async/awaitконечном итоге решает (изначально).

Async / Await обеспечивает гораздо более удобный синтаксис в более сложных сценариях. В частности, все, что связано с циклами или некоторыми другими конструкциями, такими как try/ catch.

Например:

while (!value) {
  const intermediate = await operation1();
  value = await operation2(intermediate);
}

Этот пример был бы значительно более запутанным, просто используя промисы.

Почему требуется async, await, когда Promises выполняет аналогичную работу? Решает ли async, await более серьезную проблему? или это было просто другое решение проблемы обратного вызова? Как я уже говорил ранее, я могу использовать Promises и Async, Await для решения той же проблемы. Есть ли что-нибудь конкретное, что решено с помощью Async Await?

Прежде всего вы должны понять, что async/ awaitsyntax - это просто синтаксический сахар, предназначенный для увеличения обещаний. Фактически возвращаемое значение asyncфункции - это обещание. Синтаксис async/ awaitдает нам возможность писать асинхронно в синхронном режиме. Вот пример:

Цепочка обещаний:

function logFetch(url) {
  return fetch(url)
    .then(response => response.text())
    .then(text => {
      console.log(text);
    }).catch(err => {
      console.error('fetch failed', err);
    });
}

Async функция:

async function logFetch(url) {
  try {
    const response = await fetch(url);
    console.log(await response.text());
  }
  catch (err) {
    console.log('fetch failed', err);
  }
}

В приведенном выше примере awaitожидает fetch(url)разрешения или отклонения обещания ( ). Если обещание разрешено, значение сохраняется в responseпеременной, и если обещание отклоняется, оно выдаст ошибку и, таким образом, войдет в catchблок.

Мы уже видим, что использование async/ awaitможет быть более читабельным, чем цепочка обещаний. Это особенно верно, когда количество обещаний, которые мы используем, увеличивается. И цепочка обещаний, и async/ awaitрешают проблему ада обратного вызова, и какой метод вы выберете, зависит от личных предпочтений.

Полное сравнение с плюсами и минусами.

Обычный JavaScript

• Плюсы

• Не требует дополнительных библиотек или технологий
• Предлагает лучшую производительность
• Обеспечивает лучший уровень совместимости со сторонними библиотеками
• Позволяет создавать специальные и более сложные алгоритмы

• Минусы

• Может потребоваться дополнительный код и относительно сложные алгоритмы

Async (библиотека)

• Плюсы

• Упрощает наиболее распространенные шаблоны управления потоком
• Все еще является решением на основе обратного вызова
• Хорошее исполнение

• Минусы

• Вводит внешнюю зависимость
• Может все еще не хватить для продвинутых потоков

Обещания

• Плюсы

• Значительно упрощает наиболее распространенные схемы управления потоком.
• Надежная обработка ошибок
• Часть спецификации ES2015
• Гарантирует отложенный вызов onFulfilled и onRejected

• Минусы

• Требуются API-интерфейсы promisify на основе обратного вызова
• Небольшое снижение производительности

Генераторы

• Плюсы

• Делает неблокирующий API похожим на блокирующий
• Упрощает обработку ошибок
• Часть спецификации ES2015

• Минусы

• Требуется дополнительная библиотека потока управления
• По-прежнему требуются обратные вызовы или обещания для реализации непоследовательных потоков
• Требуется преобразование или обещание API без генераторов

Асинхронное ожидание

• Плюсы

• Делает неблокирующий API похожим на блокирующий
• Чистый и интуитивно понятный синтаксис

• Минусы

• Требуется Babel или другие транспилеры и некоторая конфигурация для использования сегодня

Async / await может помочь сделать ваш код более чистым и читаемым в тех случаях, когда вам нужен сложный поток управления. Он также создает более удобный для отладки код. И позволяет обрабатывать как синхронные, так и асинхронные ошибки с помощью только try/catch.

Недавно я написал этот пост, демонстрирующий преимущества async / await над обещаниями в некоторых распространенных случаях использования с примерами кода: 6 причин, почему JavaScript Async / Await удаляет обещания (Учебник)