Oddzwonienia i obietnice | Wyjaśniono przykładami

JavaScript to język programowania wysokiego poziomu, który wykonuje synchronicznie, co oznacza, że ​​kod jest wykonywany według wiersza. Następne wiersze kodu nie mogą wykonać po pełnym wykonaniu poprzedniego wiersza kodu. Możemy jednak zaimplementować kod asynchroniczny, w którym można wykonać jakiś blok kodu wraz z oryginalnym wątkiem kodu, aby wykonać kod kodu. Aby zaimplementować kod asynchroniczny, którego używamy oddzwonienia I obietnice W JavaScript.

W tym poście zobaczymy, jakie są oddzwaniania i obietnice w JavaScript wyjaśnione za pomocą przykładów.

Co to są oddzwanianie?

Zezwiedzone są funkcje przekazywane w argumentach innych funkcji, ta procedura jest ważna w JavaScript, ponieważ funkcje są obiektami i obiekty mogą być przekazywane jako argumenty do funkcji. Podstawowa struktura funkcji wywołania zwrotnego wygląda tak samo.

funkcja demofunkcja (callback)
oddzwonić();

Sekwencja wykonania i potrzeba wywołania zwrotnej

Funkcje zwrotne służą do uzyskania kontroli nad sekwencją wykonania. Zasadniczo funkcje są wykonywane na podstawie sekwencji, którą są wywoływane, a nie na sekwencji, w której są zdefiniowane. Na przykład:

Funkcja Job1 ()
konsola.log („Jestem zadaniem 1”);

funkcja Job3 ()
konsola.log („Jestem zadaniem 3”);

Funkcja Job2 ()
konsola.log („Jestem zadaniem 2”);

Job1 ();
Job2 ();
Job3 ();

Otrzymasz następujące dane wyjściowe:

Ale co, jeśli chcemy wywołać zadanie 2 tylko wtedy, gdy zadanie 1 zakończy przetwarzanie. W tym celu potrzebujemy funkcji wywołania zwrotnego i podstawowego zrozumienia asynchronicznego wykonywania.

Przykład wywołania zwrotu w akcji

Rozważ następujący kod:

var członkowie = [„John Doe”, „Sam Smith”, „Allie Cartel”];
funkcja addnewMember (NewUser)
członkowie.push (Newuser);

funkcja getAllMembers ()
konsola.log (członkowie);

addnewmember („alfa”);
getAllMembers ();

Pracujemy z tablicą zawierającą listę członków klubu społecznego i mamy dwie funkcje. Jedna funkcja, która drukuje listę wszystkich członków, a druga służy do dodania członka do listy.

Zmieńmy ten kod, aby naśladował zachowanie prawdziwych baz danych i opóźnień w sieci, takich jak Lag i Ping.

var członkowie = [„John Doe”, „Sam Smith”, „Allie Cartel”];
funkcja addnewMember (NewUser)
settimeout (function ()
członkowie.push (Newuser);
konsola.log („członek dodany”);
, 200);

funkcja getAllMembers ()
settimeout (function ()
konsola.Log („Członkowie są:”);
konsola.log (członkowie);
, 100);

addnewmember („alfa”);
getAllMembers ();

Jak widać, ten kod używa settimeout () Funkcja naśladowania opóźnień baz danych. Adduser zajmuje około 2 sekund i getAllMembers () Funkcja zajmuje 1 sekundę.

Chcemy dodać nowego użytkownika „alfa” i wydrukować listę po dodaniu członka, a nie wcześniej i dlatego używamy sekwencji:

addnewmember („alfa”);
getAllMembers ();

Uruchom kod, a otrzymasz następujące dane wyjściowe:

Lista została wydrukowana najpierw, a następnie dodano członek. To dlatego, że program nie czekał na Dodaj członka() Funkcja do zakończenia przetwarzania. Teraz, jeśli używamy funkcji zwrotnej do wykonania getAllMembers () funkcja dopiero po addnewmember () jest zakończony, nasz kod staje się:

var członkowie = [„John Doe”, „Sam Smith”, „Allie Cartel”];
funkcja addnewMember (newuser, callback)
settimeout (function ()
członkowie.push (Newuser);
konsola.log („członek dodany”);
oddzwonić();
, 200);

funkcja getAllMembers ()
settimeout (function ()
konsola.Log („Członkowie są:”);
konsola.log (członkowie);
, 100);

addnewMember („alfa”, getAllMembers);

Jeśli spojrzysz na kod, zobaczysz to w środku addnewmember () Funkcja, którą przyjmujemy argument zwrotny, zapewni to, że funkcja wywołania zwrotnego zostanie wykonana w naszej pożądanej sekwencji.

Wyjście powyższego fragmentu kodu jest jako:

Nowy członek został najpierw dodany, a następnie cała lista została wydrukowana na konsoli. W ten sposób możesz użyć zwrotów zwrotnych, aby uzyskać kontrolę nad sekwencją wykonania.

Jakie są obietnice?

Obietnica jest obiektem i jest czymś, co jest wykonywane/ukończone w przyszłości. W JavaScript jest dokładnie taki sam jak w prawdziwym życiu. składnia obietnicy w JavaScript podano poniżej:

var myPromise = new obiec
// jakiś kod
);

Jak widać ze składni obietnicy, konstruktor obietnicy akceptuje jedynie funkcję wywołania zwrotnego jako argument. Parametry rozdzielczości i odrzucania są używane w funkcji wywołania zwrotnego, a rozdzielczość wywoływana, gdy działania przeprowadzane w funkcji wywołania zwrotnego są powołane. Jeśli jednak procedura nie powiodła się, wywoływane jest odrzucenie.

Załóżmy na przykład, że twoja matka obiecuje ci, że dasz ci rower na urodziny. Ta obietnica jest jej gwarancją, że kupi ci rower w twoje urodziny. Więc mogła kupić ci rower, czy nie. To obietnica w prostym języku laika. Patrząc na ten przykład, możemy zidentyfikować trzy stany/ możliwości obietnicy w JavaScript:

• Spełnione: rower jest kupowany. Wartość wyniku
• Oczekuje się: Twoje urodziny nie nadeszły i nie jesteś pewien, czy twoja matka kupi ci rower, czy nie. Nieokreślony
• Odrzucone: rowery nie są dla Ciebie kupowane na twoje urodziny. Błąd.

Aby lepiej zrozumieć obietnice, pozwól nam przejść przez przykład:

Najpierw weźmiemy ten przykład krok po kroku I-E. Następnie użyjemy tego obiektu obietnicy.

W poniższym kodzie będziemy tworzyć obiekt obietnicy:

// Tworzenie obiektu obietnicy
var myPromise = new obiec
const Number1 = 2;
const Number2 = 2;
// Porównanie dwóch liczb
if (numer1 === Number2)
// Operacja Udana
rozstrzygać();
w przeciwnym razie
// Wystąpił błąd
odrzucić();

);

W powyższym kodzie, po pierwsze, stworzyliśmy obiekt obietnicy moja obietnica, a następnie przekazał funkcję wywołania zwrotnego w konstruktorze obietnicy. W funkcji sprawdzamy, czy dwie liczby są równe, czy nie. Jeśli liczby są równe, wywołanie zostanie rozwiązane, w przeciwnym razie, jeśli pojawi się błąd, połączenie zostanie odrzucone.

Używać obiektu obietnicy (moja obietnica) Będziemy potrzebować "Obiecaj konsumentów”(Zajmij obietnice, rejestrując funkcje) znane jako Następnie() metoda spełnienia i złapać() Metoda odrzucenia. Poniższy kod to ilustruje:

moja obietnica.
Następnie (funkcja ()
konsola.Log („Liczby równe. Powodzenie");
).
catch (funkcja ()
konsola.log („błąd”);
);

Jeśli sprawdzane liczby są równe, wówczas .Następnie() Metoda zostanie wywołana i zobaczymy „Liczby równe. Powodzenie". Jeśli jednak liczby nie są równe, to .złapać() Metoda zostanie wywołana i zobaczymy Błąd Wiadomość w oknie konsoli.

Cały kod podano poniżej:

// Tworzenie obiektu obietnicy
var myPromise = new obiec
const Number1 = 2;
const Number2 = 2;
// Porównanie dwóch liczb
if (numer1 === Number2)
// Operacja Udana
rozstrzygać();
w przeciwnym razie
// Wystąpił błąd
odrzucić();

);
// Użyj obiektu obietnicy
moja obietnica.
Następnie (funkcja ()
konsola.Log („Liczby równe. Powodzenie");
).
catch (funkcja ()
konsola.log („błąd”);
);

Ze wyjścia widać, że liczby są równe.

Wniosek

Aby zaimplementować kod asynchroniczny w JavaScript, używamy funkcji i obietnic oddzwaniania. Funkcja wywołania zwrotnego jest przekazywana jako argument innej funkcji, podczas gdy obietnica jest czymś, co zostało osiągnięte lub wypełnione w przyszłości. W JavaScript obietnica jest obiektem i używamy konstruktora obietnicy do zainicjowania obietnicy. Aby użyć obiektów obietnicy, korzystamy z pomocy od obietnicy, którzy Następnie() Metoda (jeśli się spełniła) i złapać() Metoda (jeśli obietnica zostanie odrzucona).