Zrozum asynchronizę/Oczekuj funkcje w JavaScript | Wyjaśniono przykładami
Async Słowo kluczowe, gdy używane z definiowania funkcji sprawia, że funkcja zwraca a Obietnica, chwila czekać na Funkcja sprawia, że funkcja asynchroniczna czeka na obietnicę, która zostanie w niej zwrócona. Aby zrozumieć użycie asynchronizacji i czekać na funkcje.
Asynchronizacja i oczekiwanie to zaawansowana koncepcja JavaScript, dlatego poznamy go za pomocą różnych przykładów i rozumiemy, przechodząc przez przykładową linię według linii.
Sekwencyjne wykonywanie w JavaScript
JavaScript jest sekwencyjnie wykonanym lub możemy powiedzieć, że jedno-strypowy język skryptowy. Kod jest wywoływany według linii w sposób proceduralny.
Rozważ wiersze kodu wpisane poniżej:
funkcja hello ()konsola.Log („Hello World”);
Linuxhint ();
funkcja linuxhint ()
konsola.log („samouczek przez Linuxhint”);
konsola.log („Kod jest wykonywany w sekwencji, którą jest wywoływany”);
Witam();
Obserwuj wyjście na konsoli jako:
Jak widać, funkcje lub linie odwołane jako pierwsze były zawsze wykończone jako pierwsze. Powodem pokazania prostego przykładu, takiego jak ten, było zauważenie, kiedy sekwencja wykonania zmieni się wraz z asynchodem i obiecuje.
Asynchronizacja/ oczekiwanie w akcji
Rozważ prostą funkcję, która zwraca jakiś tekst, na przykład:
funkcja getusers ()konsola.log („Wewnątrz funkcji GetUsers”);
zwrócić „Użytkownicy”;
konsola.log („początek kodu”);
var list = getusers ();
konsola.log (lista);
konsola.log („koniec kodu”);
Dane wyjściowe następującego kodu to:
Jak widzimy funkcję zwróconą jako ciąg, który mówi, użytkownicy. Spróbujmy umieścić słowo kluczowe Async Przed definicją funkcji jako:
Funkcja async getusers ()konsola.log („Wewnątrz funkcji GetUsers”);
zwrócić „Użytkownicy”;
Teraz, na konsoli, zobaczysz, że tym razem funkcja zwróciła obietnicę, w której status „spełnił”:
Ale w przypadkach, w których pobierasz niektóre dane z niektórych interfejsów API REST lub dowolnego interfejsu API Web, ta obietnica zmieni wiele stanów, od czasu do spełnienia/odrzuconego. W takich przypadkach czekamy na powrót wyniku obietnicy, używając czekać na Słowo kluczowe.
W tym celu użyjemy interfejsu API Fetch i pobieramy informacje o użytkownikach z „API.github/użytkownicy ”z następującymi wierszami kodu:
Funkcja async getusers ()konsola.log („Wewnątrz funkcji GetUsers”);
const response = czekaj na fetch („https: // api.github.com/użytkownicy ”);
konsola.log („API odpowiedział, otrzymali użytkownicy”);
const Users = czekaj na odpowiedź.JSON ();
konsola.log („konwertowany JSON”);
Zwracaj użytkowników;
Jest tu wiele rzeczy do wyjaśnienia:
- Gdy nowa zmienna zostanie zainicjowana za pomocą tej funkcji, pierwszy wiersz zostanie wykonany, a tekst zostanie wydrukowany na konsoli.
- Kiedy kod dociera do słowa kluczowego czekać na Sprawdzi, czy obietnica jest spełniona, czy w toku, jeśli jest w stanie tocząc.
- Po wykonaniu innych części kodu powróci do funkcji przy pierwszym czekającym słowom kluczowym i ponownie sprawdzisz status obietnicy.
- Po otrzymaniu statusu spełnionego/odrzucenia wykonuje następny wiersz konsola.dziennik().
- W następnej linii, odpowiedź.JSON jest również obietnicą, sprawdzi jego status, a po thins status wyjdzie z funkcji i wykona pozostałe części kodu.
- Po wykonaniu wszystkiego innego kodu wskaźnik wróci w funkcji, sprawdź status odpowiedź.JSON, i na satysfakcjonowanym/odrzuconym statusie, wykonuje następny wiersz.
W ten sposób cały ten program wyjdzie z normalnego wykonania sekwencyjnego i wdroży asynchroniczne wykonywanie kodu za pomocą obietnic i asynchronizacja/oczekiwanie słowa kluczowe.
Kompletny fragment kodu jest jako:
Funkcja async getusers ()konsola.log („Wewnątrz funkcji GetUsers”);
const response = czekaj na fetch („https: // api.github.com/użytkownicy ”);
konsola.log („API odpowiedział, otrzymali użytkownicy”);
const Users = czekaj na odpowiedź.JSON ();
konsola.log („konwertowany JSON”);
Zwracaj użytkowników;
konsola.log („kod startowy”);
var list = getusers ();
konsola.log („utworzona lista zmiennych”);
konsola.log (lista);
lista.Następnie ((użytkownik) => konsola.log (użytkownik));
konsola.log („Ostatni wiersz kodu”);
Notatka: Linia "lista.Następnie ((użytkownik) => konsola.log (użytkownik));”Nie zostanie wykonane do momentu funkcji Getusers zajmuje się wszystkimi obietnicami i zwraca wartość, nawet tutaj sekwencyjne wykonywanie zmieni.
Teraz, jeśli uruchomisz ten program jako skrypt pliku HTML, zobaczysz następujące dane wyjściowe na konsoli:
Zbadaj dokładnie wyjście, a zauważysz przepływ wykonania jako:
- Kod się zaczyna, a zmienna jest zadeklarowana w funkcji.
- Wskaźnik wchodzi do funkcji, drukuje pierwszy wiersz, widzi czekać na Słowo kluczowe, pozostawia funkcję i zwraca obietnicę zmiennej ”lista„To właśnie stworzyliśmy.
- Wykonuje inne części kodu (dlatego możesz zobaczyć „Ostatni wiersz kodu”) Podczas oczekiwania na obietnicę w czekać na.
- Widzi linię lista.Następnie() ale nie zostanie wykonane do momentu funkcji Getusers zwraca obietnicę ze statusem rozwiązanym/odrzuconym.
- Wraca do funkcji, API odpowiada, tworzy listę użytkowników i przekształca ją w JSON.
- Status obietnic zwróconych przez funkcję asynchroniczną Getusers zmiany w spełnieniu i lista.Następnie() Wykonano linię, a my wydrukowano dane JSON na konsolę.
W ten sposób zmienisz sekwencyjne wykonywanie i wdrażasz asynchroniczne wykonanie
Wniosek
Async I czekać na Słowa kluczowe służą do wdrożenia asynchronicznego wykonywania kodu JavaScript za pomocą obietnic. Async Słowo kluczowe, gdy jest używane przed deklaracją funkcji przekształcającą funkcję w Funkcja asynchroniczna a jego typ powrotu zmienia się w obietnicy. Chwila czekać na to słowo kluczowe, które czeka na obietnicę otrzymania w Funkcja asynchroniczna. Asynchronizacja/oczekiwanie Pomóż nam napisać obietnice w znacznie ładniejszy i uporządkowany sposób, który jest bardziej czytelny i zrozumiały.