Async/await или .then() что это такое и когда их использовать.

JavaScript, несомненно, является одним из самых популярных языков программирования, используемых разработчиками как для фронтенда, так и для бэкенда. С появлением асинхронного программирования стали широко использоваться две важные функции JavaScript: async/await и .then(). Обе эти функции используются для обработки асинхронного кода, но между ними есть некоторые различия, которые необходимо понимать разработчикам.

Итак, давайте поговорим о различиях между async/await и .then() и о том, когда использовать каждый из них.

Что такое async/await?

async/await — это функция JavaScript, позволяющая разработчикам писать асинхронный код, который выглядит синхронно. Ключевое слово async используется для объявления функции, которая возвращает промис, а ключевое слово await используется для ожидания разрешения промиса.

async/await пример:

async function getUser(id) {
  const res = await fetch(`https://somerandomapi.com/users/${id}`);
  const user = await response.json();
  return user;
}

getUser(1)

В этом примере функция getUser() использует fetch() для выполнения HTTP-запроса к API для получения пользовательских данных. Ключевое слово await используется для ожидания разрешения обещания, возвращаемого fetch(), прежде чем переходить к следующей строке кода. Ключевое слово await также используется для ожидания разрешения обещания, возвращаемого response.json(), перед возвратом пользовательских данных.

Что такое .then()?

.then() — это еще один метод, который используется для обработки промисов в JavaScript. Поскольку он был добавлен в Javascript до async/await, он не читается, поскольку по своей природе является синхронным. Когда обещание разрешено, вызывается метод .then(), и разрешенное значение передается в качестве аргумента функции обратного вызова.

.then() пример:

fetch(`https://somerandomapi.com/users/1`)
  .then(res => response.json())
  .then(user => console.log(user))
  .catch(err => console.error(err));

В нашем примере .then() функция fetch() используется для выполнения HTTP-запроса к API для получения пользовательских данных, как и в нашей функции async/await. Первый метод .then() вызывается, когда обещание, возвращенное fetch(), разрешается, и он анализирует ответ, используя метод json(). Следующий метод .then() вызывается, когда обещание, возвращенное response.json(), разрешается, и записывает пользовательские данные в консоль. Метод .catch() используется для обработки любых ошибок, которые могут возникнуть во время выполнения цепочки промисов.

Различия между async/await и .then()

Синтаксис

Одним из основных различий между async/await и .then() является их синтаксис. async/await использует ключевые слова async и await, которые делают код более похожим на синхронный код. С другой стороны, .then() использует цепочку методов, из-за чего код может выглядеть более сложным.

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

Обработка ошибок также является еще одним отличием между async/await и .then(). С async/await обработка ошибок выполняется с помощью блоков try/catch. Если в функции async возникает ошибка, выдается ошибка и выполняется блок catch. С .then() обработка ошибок выполняется с помощью метода .catch(), который вызывается при возникновении ошибки в цепочке промисов.

Возвращаемые значения

async/await функции возвращают обещание, которое разрешается со значением, возвращаемым функцией, или отклоняется с ошибкой, выданной функцией. И наоборот, .then() возвращает промис, который разрешается со значением, возвращенным последним методом .then() в цепочке, или отклоняется с ошибкой, выданной в любом из методов в цепочке.

Когда использовать async/await

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

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

Когда использовать .then()

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

Еще одно преимущество .then() заключается в том, что его можно использовать для параллельной обработки нескольких промисов. Примером этого является то, что когда вам нужно сделать несколько HTTP-запросов к разным API, вы можете использовать .then() для параллельной обработки промисов и дождаться разрешения всех промисов, прежде чем продолжить остальную часть кода.

Сводка

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

При принятии решения об использовании async/await или .then() важно учитывать сложность асинхронного кода, а также удобочитаемость и ремонтопригодность кода. Понимая разницу между async/await и .then(), разработчики могут выбрать правильный инструмент для работы и писать чистый, эффективный и читаемый код.