Łączenie obietnic (Promise Chaining) to technika w JavaScript, która pozwala na wykonywanie sekwencyjnych operacji asynchronicznych w sposób uporządkowany i czytelny. Dzięki temu, możemy uniknąć tzw. “callback hell”, czyli zagnieżdżania wielu funkcji zwrotnych, co czyni kod trudnym do czytania i utrzymania. Promise chaining pozwala na wykonywanie operacji asynchronicznych jeden po drugim, gdzie wynik jednej operacji jest wykorzystywany jako dane wejściowe dla następnej.
Przykład użycia łączenia obietnic w JavaScript
W tym przykładzie zobaczymy, jak można wykorzystać łączenie obietnic do wykonania serii zapytań do API, gdzie każde kolejne zapytanie zależy od wyniku poprzedniego.
Struktura kodu HTML i JavaScript
Załóżmy, że mamy prostą stronę HTML z przyciskiem, który inicjuje łańcuch obietnic po kliknięciu.
<!DOCTYPE html>
<html>
<head>
<title>Promise Chaining Example</title>
</head>
<body>
<button id="startButton">Rozpocznij łańcuch obietnic</button>
<script>
// Funkcja symulująca zapytanie do API,
// która zwraca obietnicę
function fakeApiRequest(data) {
return new Promise((resolve, reject) => {
setTimeout(() => resolve(`Odpowiedź z ${data}`), 1000);
});
}
// Funkcja obsługująca kliknięcie przycisku
document.getElementById('startButton')
.addEventListener('click', () => {
fakeApiRequest('API 1')
.then(response => {
console.log(response);
return fakeApiRequest('API 2 z danych z API 1');
})
.then(response => {
console.log(response);
return fakeApiRequest('API 3 z danych z API 2');
})
.then(finalResponse => {
console.log('Ostateczna odpowiedź:', finalResponse);
})
.catch(error => {
console.error('Błąd:', error);
});
});
</script>
</body>
</html>
W powyższym przykładzie, fakeApiRequest jest funkcją, która symuluje zapytanie do API i zwraca obietnicę. Funkcja ta przyjmuje jako argument dane wejściowe i po krótkim opóźnieniu zwraca odpowiedź. W naszym łańcuchu obietnic, każde wywołanie fakeApiRequest zależy od wyniku poprzedniego wywołania.
Podsumowanie
Łączenie obietnic w JavaScript jest potężną techniką do zarządzania sekwencyjnymi operacjami asynchronicznymi. Pozwala na pisanie kodu w sposób liniowy, co znacząco poprawia czytelność i ułatwia zarządzanie złożonymi operacjami asynchronicznymi. Dzięki promise chaining, można uniknąć zagnieżdżenia funkcji zwrotnych i związanych z tym problemów, takich jak callback hell. Jest to niezwykle użyteczne w nowoczesnych aplikacjach webowych, gdzie często mamy do czynienia z wieloma zależnymi od siebie zapytaniami do API lub innymi operacjami asynchronicznymi.
Jeżeli chcesz przyśpieszyć swoją naukę tworzenia stron chciałbym polecić mój kurs video JavaScript w którym nauczysz się tego języka od podstaw do zaawansowanych jego aspektów.