Async/await и Promises – это способы выполнения асинхронного кода в Javascript. Они написаны и структурированы по-разному и имеют свои определенные преимущества и недостатки, когда дело доходит до вариантов использования.

Обещания

Промисы появились в ECMAScript 2015 и использовались для обработки асинхронного кода. Он использует ключевое слово .then и .catch, которое обрабатывает как успехи, так и ошибки в коде, а также позволяет разработчикам связывать несколько асинхронных операций в одном интерфейсе.

const fetchData = () => {
return fetch('https://api.example.com')
.then(response => response.json())
.then(data => {
console.log(data)
}
})
view raw Thenable.js hosted with ❤ by GitHub

Выглядит довольно просто?

Что, если мы сможем сделать его более понятным?

Асинхронно/ждите

async/await появился в ECMAScript 2017 и поддерживается во всех современных браузерах. Он используется для запуска асинхронного кода, но написан и структурирован как код в синхронном стиле с использованием ключевых слов async и await.

const fetchData = async () => {
const response = await fetch('https://api.example.com/api');
const data = await response.json()
console.log(data)
}
view raw async.js hosted with ❤ by GitHub

Выглядит лучше ? верно.

Почему Async/await лучше?

По причинам, указанным ниже, мы можем использовать этот фрагмент кода:

// Using async/await
const fetchData = async () => {
try {
const response = await fetch("https://api.example.com/api")
const data = await response.json()
console.log(data)
}catch(err) => {
console.log(err)
}
}
// Using promise chain
const fetchData = () => {
return fetch("https://api.example.com/api")
.then(response => response.json())
.then(data => console.log(data))
.catch(err => console.error(err));
}
view raw Comparison.js hosted with ❤ by GitHub
  1. Читаемость

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

Async/await предоставляет более краткие и простые строки кода, которые назначаются переменной, делает их доступными без необходимости цепочки промисов. Кроме того, их легче отлаживать и поддерживать.

2. Обработка ошибок и отладка

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

В то время как для обещаний это позволяет нам поместить обработчик ошибок в конец цепочки обещаний. Огромным недостатком использования отладчика в цепочке обещаний является объем, поскольку выполнение останавливается только там, где встречается «отладчик».

Использование отладчика в нативных промисах — беспорядок, так как вы должны быть точны при размещении точек останова в цепочке промисов.

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

3. Обработка нескольких значений

Нативное обещание

// Handling multiple values
const fetchData = () => {
return fetch('/api/data')
.then(response => response.json())
.then(data => {
return fetch(`/api/data/${data.id}`)
.then(response => response.json())
.then(user => console.log(user));
});
}
view raw multiple-values.js hosted with ❤ by GitHub

Обработка нескольких значений в этой цепочке промисов довольно проста, но очень легко потеряться в коде с таким количеством отступов, скобок и прочего. И сложнее определить точки останова для запуска отладчика.

Асинхронно/ждите

const fetchData = () => {
try {
const response = await fetch('/api.example.com/data');
const data = await response.json();
const ApiResponse = await fetch(`/api/data/${data.id}`);
const user = await ApiResponse.json();
return { data, user };
} catch (err) {
console.error(err);
}
}
view raw async-mvalues.js hosted with ❤ by GitHub

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

Подводные камни

  1. Совместимость с браузерами: Async/await — это относительно новая языковая функция Javascript, которая может поддерживаться только современными браузерами. В то время как обещания существуют дольше и используются более широко.
  2. Ошибки/трассировки стека: обработка ошибок в async/await может быть не такой точной, как обработка ошибок с помощью промисов. Ошибки в функции async/await выдаются в другом контексте, в то время как Promises использует catch в конце цепочки обещаний, что является более гибким и точным.
  3. Обработка нескольких асинхронных операций. Собственные промисы обеспечивают более чистый синтаксис при обработке нескольких асинхронных операций с использованием метода Promise.all . Async/await в этом случае может стать слишком многословным.

Вывод :

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

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