JavaScript є основою сучасних веб-додатків. Однак динамічний характер вебу іноді ставить під питання традиційні парадигми синхронного програмування. Саме тут в гру вступає асинхронний JavaScript. У цій статті ми розглянемо, як працює асинхронний JavaScript і як Promises роблять його більш читабельним та зручним для керування.
Що таке асинхронне програмування?
Асинхронне програмування — це техніка, яка дозволяє коду виконуватися без очікування на інші процеси. Це особливо корисно для завдань, що потребують багато часу (наприклад, виклики API, читання/запис файлів або таймаути).
Наприклад:
console.log("1-ше завдання");
setTimeout(() => {
console.log("2-ге завдання (після 3 секунд)");
}, 3000);
console.log("3-є завдання");
Як ви бачите, друге завдання завершується пізніше, в той час як інший код продовжує виконуватись.
Promises: Сучасний спосіб керувати асинхронними завданнями
Promise у JavaScript — це структура, яка використовується для управління асинхронними завданнями більш чисто та читабельно. Promises часто описують як "обіцянку": завдання або вдасться (resolve), або не вдасться (reject).
Структура Promise
Promise визначається наступним чином:
const promise = new Promise((resolve, reject) => {
let success = true; // Симулюємо статус
if (success) {
resolve("Завдання успішно виконано!");
} else {
reject("Завдання не виконано.");
}
});
Цей Promise можна використовувати так:
promise
.then(result => {
console.log(result); // "Завдання успішно виконано!"
})
.catch(error => {
console.error(error); // "Завдання не виконано."
});
Реальний приклад: Виклики API
Promises часто використовуються в операціях отримання даних. Наприклад, для отримання даних з API:
function fetchData(url) {
return new Promise((resolve, reject) => {
fetch(url)
.then(response => {
if (!response.ok) {
throw new Error("Помилка мережі!");
}
return response.json();
})
.then(data => resolve(data))
.catch(error => reject(error));
});
}
fetchData("https://jsonplaceholder.typicode.com/posts/1")
.then(data => {
console.log("Успіх:", data);
})
.catch(error => {
console.error("Помилка:", error.message);
});
Спрощення роботи з Promises через Async/Await
Запроваджені в ES8, async та await роблять Promises більш інтуїтивними. Наприклад, ми можемо переписати попередній виклик API наступним чином:
async function fetchDataAsync(url) {
try {
const response = await fetch(url);
if (!response.ok) {
throw new Error("Помилка мережі!");
}
const data = await response.json();
console.log("Успіх:", data);
} catch (error) {
console.error("Помилка:", error.message);
}
}
fetchDataAsync("https://jsonplaceholder.typicode.com/posts/1");
Ланцюжок Promises
Promises дозволяють вам з'єднувати кілька асинхронних завдань:
fetch("https://jsonplaceholder.typicode.com/posts/1")
.then(response => response.json())
.then(data => {
console.log("Перші дані:", data);
return fetch("https://jsonplaceholder.typicode.com/posts/2");
})
.then(response => response.json())
.then(data => {
console.log("Другі дані:", data);
})
.catch(error => {
console.error("Сталася помилка:", error);
});
Асинхронний JavaScript та Promises — потужні інструменти, які спрощують процес розробки сучасних веб-додатків. Використовуючи Promises та структуру async/await, ви можете зробити свій код більш читабельним, зручним у керуванні та продуктивним. Це не лише покращує досвід користувача, а й спрощує складні робочі процеси.
Перекладено з: Asynchronous JavaScript and Promises: The Power of Modern Web