Jedną z najczęściej wykorzystywanych możliwości w JavaScript jest wykonywanie operacji asynchronicznych. W JavaScript mamy do dyspozycji kilka metod obsługi operacji asynchronicznych: callback, Promise, Observable.

Callbacki, czyli funkcje wywołania zwrotnego, są najstarszą techniką w JavaScript służącą do zarządzania asynchronicznością. Callbacki w JavaScript mogą być używane do takich operacji asynchronicznych jak wysyłanie zapytań do serwera oraz zewnętrznego api (np. Google API, Facebook API etc), czy nasłuchiwania na zdarzenia (np. onClick, onMouseOver).

Callback w JavaScript jest funkcją przekazywaną jako argument do innej funkcji, w celu jej późniejszego wykonania.

Tworzenie callback’a

Callback w JavaScript jest typową funkcją. Składa się z bloku kodu umieszczonego w nawiasach klamrowych, poprzedzonego słowem kluczowym function, który zostanie wykonane po wywołaniu funkcji.

Korzystanie z funkcji anonimowej jest jednym z powszechnych wzorców wykorzystywanych w funkcjach zwrotnych.

function zapisz(callback) {
    console.log('zapisywanie danych...');
    callback();
}
zapisz(function () {
    console.log('dane zostały zapisane');
});

Innym popularnym wzorcem jest deklaracja nazwanej funkcji i przekazanie nazwy tej funkcji w parametrze.

function zapisz(callback) {
    console.log('zapisywanie danych...');
    callback();
}
function zapisano() {
    console.log('dane zostały zapisane');
}
zapisz(zapisano);

Definiując parametr, który będzie przechowywał funkcję wywołania zwrotnego, nie musisz używać słowa „callback”, możesz nadać mu dowolną nazwę.

function zapisz(foo) {
    console.log('zapisywanie danych...');
    foo();
}
zapisz(function () {
    console.log('dane zostały zapisane');
});

Możemy przekazać więcej niż jedną funkcję callback jako argument funkcji, tak jak możemy przekazać więcej niż jedną zmienną. Nie ma żadnych ograniczeń dotyczących ilości funkcji callback.

function zapisz(callback1, callback2) {
    console.log('zapisywanie danych...');
    callback1();
    console.log('dane zostały zapisane');
    callback2();
}
zapisz(function () {
    console.log('zapisywane w trakcie');
}, function () {
    console.log('zapisywanie zakończone');
});

Wywołanie callback’a

Gdy przekazujemy callback jako argument funkcji, przekazujemy tylko jej definicję. Aby wywołać callback należy użyć nawiasów okrągłych.

Jako, że callback w JavaScript jest po prostu normalną funkcją, podczas jej wykonywania możemy przekazać do niej dowolną ilość argumentów. Argumenty tych można następnie użyć wewnątrz funkcji.

function zapisz(callback) {
    console.log('zapisywanie danych...');
    if (typeof callback === 'function') {
        callback(1);
    }
}

Nie ma żadnych ograniczeń, ile razy możemy wywołać funkcję callback.

function zapisz(callback) {
    console.log('zapisywanie danych...');
    callback();
    callback();
}
zapisz(function () {
    console.log('dane zostały zapisane');
});

Zawsze dobrze jest sprawdzić, czy funkcja wywołania zwrotnego przekazana w parametrze jest rzeczywiście funkcją przed jej wywołaniem. Bez wspomnianego sprawdzenia, wywołanie funkcji bez parametru spowoduje błąd.

function zapisz(callback) {
    console.log('zapisywanie danych...');
    if (typeof callback === 'function') {
        callback();
    }
}

Dobrą praktyką jest również, aby funkcja callback była opcjonalna.

Callback Hell

Callbacki w JavaScript świetnie nadają się do obsługi prostych operacji asynchronicznych, ale nie sprawdzają się, gdy konieczne jest użycie kilku operacji asynchronicznych, a wykonanie następnej operacji zależy od powodzenia poprzedniej.

czyJestZalogowany(function (czyZalogowany) {
    if (czyZalogowany) {
        pobierzDaneUzytkownika(function (dane) {
            if (dane.isPremium) {
                pobierzTrescPremium(function (tresc) {
                    console.log(tresc);
                });
            }
        });
    }
});

Powyższy przykład reprezentuje Callback Hell, czyli wielokrotne zagnieżdżanie funkcji wywołania zwrotnego. Takie wielokrotne zagnieżdżenie jest nieczytelne i utrudnia interpretację kodu.

Podsumowanie

  • Callback jest funkcją przekazywaną jako argument do innej funkcji, w celu jej późniejszego wykonania.
  • Callback w JavaScript jest typową funkcją, która może mieć nazwę lub być anonimowa.
  • Możemy przekazać więcej niż jedną funkcję callback.
  • Wywołując funkcję callback możemy przekazać do niej dowolną liczbę argumentów.
  • Nie ma żadnych ograniczeń, ile razy możemy wywołać funkcję callback.
  • Calback Hell to wielokrotne zagnieżdżenie funkcji callback

0 Comments

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *