Promises – metody

Tym razem ciąg dalszy o Promisach. W pierwszym wpisie były podstawy, dziś przedstawię metody Promise: Promise.all, Promise.race oraz nowsze, takie jak Promise.allSettled i Promise.any. Na koniec będzie też trochę o async i await. Promise.all Promise.all to metoda za pomocą której możemy poczekać na wykonanie wszystkich interesujących nas obietnic. Jako argument przyjmuje tablicę tychże Promise i jako wynik zwraca również tablicę z wynikami zwróconymi przez obietnice. randPromiseResolve jest funkcją zwracającą Promise który zostanie rozwiązany poprawnie. Tak napisany kod poczeka aż wszystkie Promise podane w tablicy zostaną wykonane (zwrócą wynik) i dopiero wtedy wykonany zostanie kod z metody then. W powyższym przypadku jest Czytaj dalej…

Przez lewy, temu

Promises

JavaScript to język asynchroniczny i czasem praca z nim może być uciążliwa lub mało czytelna. Z pomocą w opanowaniu tego haosu przychodzą nam właśnie Promises. Promises to nic innego jak obiekt reprezentujący wartość wykonania pewnego asynchronicznego wywołania. Jak sama nazwa wskazuje Promises to obietnica, że kiedyś (po wykonaniu wywołania) otrzymamy wynik i należy go obsłużyć. Przykładowe użycia to zapytania http czy obsługa plików (node.js). Ok, wiedząc czym jest Promises, możemy zobaczyć jego przykład. W pierwszej linijce tworze nowy obiektu Promise, jak widać przyjmuje on funkcję jako argument. Funkcja ta ma 2 argumenty (callbacki) które wywołujemy w zależności czy obietnica ma Czytaj dalej…

Przez lewy, temu

Openapi generator – REST client dla Angular

Tworząc aplikacje www bardzo często piszemy tzw. backend i frontend. Może wówczas (ale nie musi!) powstać problem związany z API do komunikacji pomiędzy tymi dwiema warstwami. Bardzo często odbywa się to na zasadzie dogadujemy się jak wygląda endpoint, ustalamy jego ścieżkę (adres), parametry wejściowe, wyjściowe i metodę komunikacji. Możemy to spisać ale ostatecznie i tak narażamy się na „nieprzewidziane” zmiany. Dodatkowo wybierając tą metodę zmuszeni jesteśmy do pisania elementów API po obu stronach (zwiększając możliwość popełnienia błędu). Są jednak narzędzia które umożliwiają automatyczne generowanie kodu dla jednej ze stron komunikacji. Dzięki temu raz że oszczędzamy czas, a dwa zmniejszamy ryzyko Czytaj dalej…

Przez lewy, temu

Angular interceptor

Interceptory jak sama nazwa wskazuje służą do przechwytywania wywołań http i ich modyfikacji, a Angular udostępnia nam wbudowane narzędzia do ich łatwej obsługi. Dzięki interceptorom możemy przechwycić globalnie każde nasze wywołanie http, dowolnie zmodyfikować jego zawartość i przekazać dalej. Możemy również za pomocą interceptora przechwytywać odpowiedź od serwera i wykonać na niej jakieś operacje. Interceptorów możemy napisać wiele w naszej aplikacji i tworzyć łańcuchy wywołań interceptorów, ostatnie wywołanie w łańcuchu jest wykonaniem zapytania do serwera. Aby zaimplementować interceptor piszemy serwis, który implementuje interfejs HttpInterceptor czyli zawiera metodę intercept Jest to najprostszy interceptor, który jest i tyle. Interceptor ten nic nie Czytaj dalej…

Przez lewy, temu

Dekorujemy TypeScript

TypeScript to taki fajny JavaScript i daje nam trochę więcej niż sam „król” przeglądarek. Jedną z tych fajnych rzeczy (choć nie każdy potwierdzi moje zdanie) które mamy w TypeScript a nie mamy w JavaScript są dekoratory. Dekoratory to typy deklaracji, które mogą być używane z klasami, metodami klas, akcesorami (?, setter/getter) w klasach, własnościami klas lub parametrami metod w klasach. A tak po polskiemu to po prostu funkcje które wywoływane są w runtime’ie wraz z wymienionymi wyżej elementami. Dekoratorów używamy za pomocą zapisu @NazwaDekoratora gdzie NazwaDekoratora to nasza funkcja która zostanie wywołana wraz z dekorowanym elementem i do której zostaną Czytaj dalej…

Przez lewy, temu

Nadal żyję i nic złego się nie stało

Tytuł może i trochę dziwny ale dziś inny wpis. Nie było mnie tu ponad rok, to był ciężki rok i wiele się wydarzyło. Duże zmiany w życiu prywatnym, do tego zawirowania zawodowe – dwie zmiany pracy w 6 (w rzeczywistości to 8 bo trochę się oszukiwałem) miesięcy! <szok> Jakieś 15 miesięcy temu po kilku(nastu) latach pracy z kodem postanowiłem że trzeba coś zmienić, zrobić jakiś krok w przód bo stagnacja dobija. Wiadomo że zmiany to wyjście po za własną strefę komfortu i nigdy nie jest łatwo, ale stwierdziłem że trzeba się odważyć, kiedy jak nie teraz, wszystko wskazywało że jest to Czytaj dalej…

Przez lewy, temu

Angular komponent – ViewEncapsulation

Tworząc komponenty za pomocą Angulara dostajemy możliwość zarządzania kapsułkowaniem styli dla komponentów. W rzeczywistości oznacza to, że dostajemy możliwość zarządzania tym jak style z danego komponentu mają wpływać na resztę aplikacji (inne komponenty). Sposób kapsułkowania w komponencie ustawiamy za pomocą właściwości encapsulation obiektu metadanych komponentu Jak widzimy Angular dostarcza 4 sposoby kapsułkowania styli dla komponentu. Domyślnym sposobem (czyli jeżeli nie podamy parametru encapsulation) jest Emulated, dodatkowo dostępne mamy ShadowDom, None i Native. Poniżej opiszę pierwsze 3, Native pominę ponieważ jest już deprecated. ViewEncapsulation.Emulated Jest to domyślna wartość kapsułkowania styli w Angular i charakteryzuje się tym, że style są domknięte w Czytaj dalej…

Przez lewy, temu

Angular – cykl życia komponentu

Angular dla komponentów, czyli podstawowych elementów budowy aplikacji udostępnia dość pokaźny zestaw tzw. hooków (uchwytów?), dzięki którym możemy reagować w interesujących nas momentach cyklu życia komponentu (Angular component lifecycle) na zdarzenia zachodzące w danym komponencie. Hooków jest 8, wyglądają następująco i odpalane są w następującej kolejności Przed hookami uruchamiany jest jeszcze konstruktor klasy komponentu. ngOnChanges – Pierwszym uruchamianym hookiem (co nie musi być tak oczywiste) jest ngOnChanges. Funkcja ta uruchamiana jest gdy dla pól klasy oznaczone dekoratorem @Input() zmienią się wartości (jeżeli klasa nie posiada pól oznaczonych @Input() ngOnChanges nie jest uruchamiany) jest to jedyna metoda z cyklu życia komponentu, Czytaj dalej…

Przez lewy, temu

Referencja

W JavaScript/TypeScript rozróżniamy typy proste i typy złożone. Typy proste to string, number, boolean. Zmienna przechowująca typ prosty przechowuje po prostu wartość. Jeżeli wartość jest typu złożonego (obiekt, tablica) to wówczas zmienna jest referencją do tej wartości a nie samą wartością. Jeżeli utworzymy zmienną typu prostego a następnie drugą zmienną której jako wartość inicjującą przypiszemy wcześniej utworzoną zmienną, to wówczas druga zmienna otrzyma kopię wartości znajdującej się w pierwszej zmiennej. Sprawa ma się trochę inaczej w przypadku typów złożonych. Jeżeli do zmiennej przypiszemy typ złożony (np. nowy obiekt) to zmienna będzie tak naprawdę referencją na ten obiekt a nie samym Czytaj dalej…

Przez lewy, temu

Operatory logiczne w JavaScript

W poprzednim wpisie – Rekrutacja frontend developer – dałem zajawkę co przeczytać będzie można w kolejnym wpisie, słowo się rzekło więc dziś o operatorach logicznych w JavaScript/TypeScript – && (koniunkcja) i || (alternatywa). Niby temat banalny, bo co tu skomplikowanego w kodzie najbardziej intuicyjne ale czy najczęstsze zastosowanie operatorów logicznych? Kod powyżej pokazuje wprost – zmienna x jest true, zmienna y false, więc pierwsze wyrażenie nie jest prawdziwe a drugie już tak, co skutkować będzie wyświetleniem tylko drugiego komunikatu na konsoli. Cała zabawa zaczyna się w momencie gdy nie wiemy co będzie się kryło pod zmiennymi sprawdzanymi w wyrażeniach (dane Czytaj dalej…

Przez lewy, temu