Angular - asynchroniczne wykonywanie kodu za pomocą typu Promise
Stronę tą wyświetlono już: 2183 razy
Wstęp
Konieczne jest na wstępie opowiedzenie co nieco o tym, czym jest wykonanie kodu asynchronicznie a czym wykonanie kodu synchronicznie. Otóż wyobraź sobie, że jest sobie taki kawałek kodu:
gdzie wszystkie funkcje wykonywane są synchronicznie. Oznacza to, że funkcja b zostanie wykonana dopiero gdy funkcja a zakończy swoje działanie. Co się jednak stanie, jeżeli czas realizacji działania funkcji a będzie wymagał np. 10s? W takim przypadku cała aplikacja zostanie "zamrożona". Użytkownik może sobie pomyśleć, że się zawiesiła i ją zamknąć. Może też być nieco podirytowany zaistniałą sytuacją. Gdyby tylko istniało jakieś sprytne, żeby nie powiedzieć przebiegłe rozwiązanie tego problemu. Rozwiązaniem jest użycie wywołania asynchronicznego, czyli takiego, które wykona kod funkcji a w oddzielnym wątku. Jednym z sposobów realizacji takich asynchronicznych działań jest użycie zmiennych typu Promise (ang. obietnica).
Czym jednak jest ta obietnica i dlaczego to się tak nazywa. Otóż czasami a nawet i często okazuje się, że realizacja kodu funkcji nie będzie możliwa co spowodowane może być szeregiem różnych przyczyn np. napotkanie błędnych danych, przerwanie połączenia itd. itp. W takim razie nie ma żadnej gwarancji, że kod się wykona, ale jest obietnica próby wykonania zadania jakim jest wykonanie kodu.
Podstawowa konstrukcja użycia typu Promise
Czas, aby złożyć pierwszą obietnicę! I jej nie dotrzymać albo dotrzymać (któż to wie). Oto bowiem jak wygląda asynchroniczne wywołanie kodu za pomocą Promise:
Oczywiście, powyższy kod spowoduje, że po chwili lub co najwyżej dwóch wyświetlone w konsoli przeglądarki zostaną następujące rewelacyjne informacje:
10 devided by 1 is equal: 10 10 devided by 2 is equal: 5 10 devided by 3 is equal: 3.3333333333333335 10 devided by 4 is equal: 2.5 10 devided by 5 is equal: 2 10 devided by 6 is equal: 1.6666666666666667 10 devided by 7 is equal: 1.4285714285714286 10 devided by 9 is equal: 1.1111111111111112 is equal zero ERROR: I made a promise and I faild I just can't divide by zero my old jedi friend End of promise my old jedi friend
Jak widać złożyłem obietnicę i nawet na początku dobrze mi szło jej realizowanie. Niestety jedna z wartości liczbowych była równa 0 a wszyscy wiedzą, by nie dzielić przez zero. Z tego też względu musiałem przyznać się do porażki i odrzucić za pomocą metody reject realizację obietnicy. Gdyby tylko to nieszczęsne zero nie istniało w tablicy, wszystko mogło się potoczyć zupełnie inaczej!
Oczywiście powyższy przykład miałby więcej sensu, gdyby dane do przeliczenia miały znaczną liczbę rekordów, taką która zajęła by procesorowi dobrych kilka sekund.
Łączenie obietnic!
Obietnice można spełniać ale można również je łączyć. Coby zbyt długo nie przynudzać spójrzmy łaskawym okiem na poniższy kawałek kodu:
Wynik działania powyższego kodu jest następujący:
10 devided by 1 is equal: 10 10 devided by 2 is equal: 5 10 devided by 3 is equal: 3.3333333333333335 10 devided by 4 is equal: 2.5 10 devided by 5 is equal: 2 10 devided by 6 is equal: 1.6666666666666667 10 devided by 7 is equal: 1.4285714285714286 10 devided by 9 is equal: 1.1111111111111112 10 devided by 10 is equal: 1 10 devided by 100 is equal: 0.1 10 devided by 200 is equal: 0.05 10 devided by 300 is equal: 0.03333333333333333 I made a promise and I'm not fail: 28.2230158730158754 And anothere one is made: 20.89478466266473 Promise is done my old jedi friend
Jak widać, udało mi się tym razem spełnić nie jedną ale dwie obietnice!
Tytuł:
Angular. Profesjonalne techniki programowania. Wydanie IV
Autor:
Adam Freeman
Tytuł:
Angular. Programowanie z użyciem języka TypeScript. Wydanie II
Autor:
Yakov Fain, Anton Moiseev
Tytuł:
ASP.NET Core, Angular i Bootstrap. Kompletny przybornik front-end developera
Autor:
Simone Chiaretta
Tytuł:
Angular instalacja i działanie. Nauka krok po kroku
Autor:
Shyam Seshadri
Tytuł:
Angular w akcji
Autor:
Jeremy Wilken
Tytuł:
ASP.NET Core 2 i Angular 5. Przewodnik dla Full-Stack Web Developera
Autor:
Valerio De Sanctis
Tytuł:
Angular. Profesjonalne techniki programowania. Wydanie II
Autor:
Adam Freeman
Tytuł:
Angular 2. Programowanie z użyciem języka TypeScript
Autor:
Yakov Fain, Anton Moiseev
Tytuł:
Angular 2. Tworzenie interaktywnych aplikacji internetowych
Autor:
Gion Kunz