Навігація в JavaScript: Async/Await проти Then/Catch

текст перекладу
Концепція, хоча й є складною для початківців, є надзвичайно важливою для опанування основ мови.

Як людина, яка порівняно недавно почала розробку, я можу сказати, що нюанси синтаксису Javascript можуть бути і захоплюючими, і в середньому — переповнюючими. Одним з основних аспектів JavaScript, який я довго не міг зрозуміти, є обробка асинхронного коду. JavaScript не має одного стандартного способу обробки асинхронного коду, і хоча це може призвести до плутанини для новачка, розуміння найбільш поширених способів написання асинхронного коду стало необхідним для мого розвитку як розробника.

Два найбільш поширених підходи — це використання async/await або then/catch. Кожен з них має свою цінність, хоча async/await часто називають більш ефективним наступником (з моменту його введення в ES2017). Давайте спочатку розглянемо так званого попередника — then/catch.

Then/Catch

Метод then/catch історично був стандартом для обробки промісів. Ось приклад того, як він працює:

fetch('https://api.example.com/data')  
 .then(response => response.json())  
 .then(data => {  
 console.log(data);  
 })  
 .catch(error => {  
 console.error('Помилка при отриманні даних:', error);  
 });

Після того, як дані завантажуються з зовнішнього API, .then() використовується для обробки виконаного промісу, а .catch() обробляє будь-які помилки, які можуть виникнути під час асинхронної операції. Хоча цей підхід працює, він може стати обтяжливим, коли потрібно ланцюжити кілька асинхронних викликів, оскільки кожен .then() додає ще один рівень відступу і складності. Це робить програму заплутаною навіть для тих, хто не є новачком!

Async/Await

Async/await спрощує написання асинхронного коду. За допомогою async/await асинхронні операції можуть бути записані так, що вони майже виглядають як синхронні, що робить код більш зручним для читання і розуміння. Ось приклад:

async function fetchData() {  
 try {  
 const response = await fetch('https://api.example.com/data');  
 const data = await response.json();  
 console.log(data);  
 } catch (error) {  
 console.error('Помилка при отриманні даних:', error);  
 }  
}

Ключове слово async (яке завжди ставиться перед початком функції) використовується для визначення функції, що повертає проміс. Ключове слово await призупиняє виконання функції до того часу, поки проміс не буде виконаний, майже якби все, що йде після нього, мало почекати. Таким чином, потік коду виглядає послідовним.

Цей підхід дозволяє уникнути глибоко вкладених і заплутаних зворотних викликів і підвищує читабельність коду. Однак async/await не усуває помилки повністю — все ще потрібне належне оброблення помилок, що приводить нас до наступної теми.

Try/Catch

Блок try/catch в async/await пропонує чистіший спосіб обробки помилок. Замість того, щоб ланцюжити виклики .catch(), ви можете інкапсулювати свою мету в блоці try і обробити помилки в одному блоці catch. Цей підхід дозволяє тримати логіку обробки помилок поруч з кодом, з яким вона пов’язана, що спрощує відлагодження і підтримку.

Ось приклад того, як працює try/catch з async/await:

async function processData() {  
 try {  
 const response = await fetch('https://api.example.com/data');  
 const data = await response.json();  
 if (!data.success) {  
 throw new Error('Отримання даних не вдалося');  
 }  
 console.log(data);  
 } catch (error) {  
 console.error('Помилка при обробці даних:', error);  
 }  
}

Ця структура забезпечує централізовану обробку всіх ваших помилок, і код залишається зручним для читання.
текст перекладу
Це часто вважається більш інтуїтивно зрозумілим, особливо для розробників, які переходять від синхронних парадигм програмування.

Бонус: Оператор безпечного присвоєння

Оператор безпечного присвоєння (??=) — це новіший інструмент, який може покращити чіткість вашого JavaScript коду, особливо при роботі з значеннями за замовчуванням. Цей оператор присвоює значення змінній лише в тому випадку, якщо ця змінна дорівнює null або undefined. Ось приклад:

let config = null;  
config ??= { retries: 3, timeout: 5000 };  
console.log(config); // { retries: 3, timeout: 5000 }

У контексті асинхронних операцій цей оператор може бути корисним для встановлення резервних значень при обробці потенційно невизначених або нульових відповідей.

Чи завжди краще бути лаконічним?

Коли ви пишете JavaScript, іноді здається, що існує протиріччя між лаконічністю і читабельністю. Хоча підхід then/catch іноді дозволяє написати код коротше, читабельність і підтримуваність try/catch роблять його більш надійним вибором для більшості випадків використання. З async/await лаконічна структура є незаперечним оновленням для вашого асинхронного коду.

Те ж саме стосується використання операторів, таких як ??=. Хоча вони можуть зробити ваш код більш стиснутим, надмірне використання таких функцій іноді може затуманити намір коду, особливо для нових розробників.

Отже, чи завжди краще бути лаконічним? Мабуть, ні! Хоча компактний код може виглядати елегантно, чіткість завжди повинна бути на першому місці. Продовжуючи вдосконалювати свої навички JavaScript, важливо знаходити баланс між лаконічністю і читабельністю — код має бути не лише функціональним, а й доступним для співпраці.

Перекладено з: Navigating JavaScript: Async/Await vs Then/Catch