Moduł 12 – Asynchroniczność

Moduł kursu o numerze 12 nosi nazwę "Asynchroniczność" i jest jednym z najważniejszych tematów, który zostanie omówiony.

W tej części kursu dowiesz się, jak pobierać dane z serwera oraz jak radzić sobie z asynchronicznym wykonywaniem kodu w języku JavaScript. Będziemy również analizować zdarzenia związane z komunikacją z serwerem i jak odpowiednio zareagować na odpowiedzi serwera.

Wcześniej skupialiśmy się wyłącznie na pracy z kodem i danymi, które sami wcześniej napisaliśmy lub reagowaliśmy na działania użytkownika naszej aplikacji. W tym rozdziale dowiemy się, jak pobierać dane z serwerów, przetwarzać je i wyświetlać, a także jak postępować, gdy nie uda się pobrać danych. Poznamy również standardy komunikacji z serwerem, takie jak REST.

📚 Zawartość modułu

Moduł "Asynchroniczność" jest podzielony na 93 lekcji:

1. Kolejność wykonywania kodu – przypomnienie: Przypomnienie o kolejności, w jakiej wykonywany jest kod w języku JavaScript.
2. setTimeout: Wykorzystanie funkcji setTimeout do opóźnienia wykonywania kodu.
3. Event loop: Poznanie zasady działania pętli zdarzeń (event loop) w przeglądarkach.
4. Callbacki w praktyce: Zastosowanie callbacków w praktyce przy obsłudze asynchronicznych operacji.
5. Koncepcja obietnic w JS: Zapoznanie się z koncepcją obietnic (promises) i ich roli w asynchronicznym kodzie.
6. new Promise: Tworzenie własnych obietnic przy pomocy konstruktora Promise.
7. Zamawiamy piwo: Anegdota przedstawiająca koncepcje promisów przy pomocy zamawiania piwa w barze.
8. Callback hell: Omówienie problemu callback hell i sposobów na jego uniknięcie.
9. then(): Korzystanie z metody then() do obsługi wyników zakończonych obietnic.
10. catch(): Obsługa błędów przy użyciu metody catch() dla obietnic.
11. Chaining – łańcuchowanie: Łączenie wielu operacji asynchronicznych.
12. Microtasks and Macrotasks: Różnica między microtasks a macrotasks w kontekście kolejności wykonywania kodu.
13. Fetch: Wykorzystanie funkcji fetch do pobierania danych z serwera.
14. Custom fetch: Implementacja własnej funkcji fetch dla lepszej kontroli nad zapytaniami sieciowymi.
15. Aplikacja ładująca dane: Tworzenie aplikacji, która pobiera i wyświetla dane z serwera.
16. Aplikacja ToDo ładująca dane: Rozbudowa aplikacji ToDo o funkcję pobierania danych z serwera.
17. Aplikacja ToDo ładująca dane - część 2: Kontynuacja rozbudowy aplikacji ToDo o funkcję pobierania danych z serwera.
18. Aplikacja przeładowująca użytkowników: Implementacja funkcjonalności wyświetlania i przeładowywania użytkowników w nowej aplikacji.
19. Filtrowanie użytkowników: Dodanie możliwości filtrowania użytkowników w aplikacji.
20. Podstawy HTTP: Omówienie podstawowych pojęć związanych z protokołem HTTP.
21. HTTP - status codes & headers: Poznanie różnych kodów statusu i nagłówków HTTP oraz ich znaczenia.
22. HTTP - REST API & CRUD: Zrozumienie REST API i operacji CRUD (Create, Read, Update, Delete) w kontekście HTTP.
23. HTTP - Postman - instalacja: Instrukcja instalacji narzędzia Postman do testowania i debugowania interfejsów HTTP.
24. Open Weather Map API: Wykorzystanie Open Weather Map API do pobierania informacji o prognozie pogody.
25. Aplikacja pogodowa - część 1: Tworzenie aplikacji pogodowej, która korzysta z Open Weather Map API.
26. Konfiguracja webpacka przez create-react-app: Konfiguracja środowiska developerskiego z użyciem narzędzia create-react-app.
27. Aplikacja pogodowa - część 2: Kontynuacja rozbudowy aplikacji pogodowej o nowe funkcje.
28. Aplikacja pogodowa - część 3: Dalsze ulepszanie aplikacji pogodowej, dodawanie animacji i stylizacji.
29. Debounce: Zastosowanie debouncingu do lepszej obsługi zdarzeń asynchronicznych.
30. Aplikacja pogodowa - część 4: Rozbudowa aplikacji pogodowej o funkcję wyszukiwania i filtrowania danych.
31. Aplikacja pogodowa - część 5: Finalizacja aplikacji pogodowej, optymalizacja i testowanie.
32. Firebase – wprowadzenie: Wprowadzenie do platformy Firebase i jej możliwości.
33. Firebase – REST API - PUT: Wykorzystanie metody PUT w REST API Firebase do aktualizacji danych.
34. Firebase – REST API - POST: Dodawanie nowych danych za pomocą metody POST w REST API Firebase.
35. Firebase – REST API - PATCH: Aktualizacja wybranych pól danych przy użyciu metody PATCH w REST API Firebase.
36. Firebase – REST API - DELETE: Usuwanie danych z bazy przy użyciu metody DELETE w REST API Firebase.
37. Firebase – REST API - GET & filtrowanie: Pobieranie danych z bazy Firebase i filtrowanie ich zgodnie z określonymi kryteriami.
38. Counter z bazą danych 1: Implementacja licznika z wykorzystaniem bazy danych w Firebase.
39. Counter z bazą danych 2: Kontynuacja rozbudowy licznika z wykorzystaniem bazy danych w Firebase.
40. Własny "Postman" część 1 – Textarea: Tworzenie własnej aplikacji podobnej do Postman z wykorzystaniem elementu textarea.
41. Własny "Postman" część 2 – App state: Implementacja stanu aplikacji w aplikacji typu "Postman".
42. Własny "Postman" część 3 – Select: Dodanie elementu Select do aplikacji "Postman" dla wyboru typu żądania.
43. Własny "Postman" część 4 – Input & Button: Dodanie pól Input i przycisku do aplikacji "Postman" w celu wprowadzania danych.
44. Własny "Postman" część 5 – Wysyłanie żądań: Implementacja funkcji wysyłania żądań w aplikacji "Postman".
45. Własny "Postman" część 6 – Dopracowanie aplikacji "Postman".
46. ToDo lista z bazą danych: Tworzenie aplikacji ToDo listy z wykorzystaniem bazy danych.
47. ToDo lista z bazą danych – część 2: Kontynuacja rozbudowy aplikacji ToDo listy z bazą danych.
48. ToDo lista z bazą danych – część 3: Dalsza rozbudowa aplikacji ToDo listy z bazą danych.
49. ToDo lista CRUD – część 1: Wprowadzenie do operacji CRUD (Create, Read, Update, Delete) w aplikacji ToDo listy.
50. ToDo lista CRUD – część 2 - READ: Implementacja operacji odczytu (READ) w aplikacji ToDo listy.
51. ToDo lista CRUD – część 3 - CREATE: Implementacja operacji tworzenia (CREATE) w aplikacji ToDo listy.
52. ToDo lista CRUD – część 4 - UPDATE: Implementacja operacji aktualizacji (UPDATE) w aplikacji ToDo listy.
53. ToDo lista CRUD – część 5 - DELETE: Implementacja operacji usuwania (DELETE) w aplikacji ToDo listy.
54. ToDo lista CRUD – część 6: Rozbudowywanie aplikacji ToDo listy z operacjami CRUD.
55. Jak działa autoryzacja w sieci – anegdota: Przykładowa anegdota ilustrująca działanie mechanizmu autoryzacji w sieci.
56. Jak działa autoryzacja w sieci – diagram: Przedstawienie diagramu, który obrazuje działanie autoryzacji w sieci.
57. Jak wygląda JWT: Omówienie struktury i wyglądu tokena JWT (JSON Web Token).
58. Konfiguracja autentykacji w Firebase: Instrukcja konfiguracji mechanizmu autentykacji w Firebase.
59. Konfiguracja autoryzacji w Firebase: Omówienie procesu konfiguracji mechanizmu autoryzacji w Firebase.
60. Rejestracja przez REST API: Implementacja funkcjonalności rejestracji użytkownika przez REST API.
61. Logowanie przez REST API: Implementacja funkcjonalności logowania użytkownika przez REST API.
62. Dostęp do autoryzowanego zasobu przez REST API: Przedstawienie sposobu uzyskiwania dostępu do autoryzowanego zasobu przy użyciu REST API.
63. Logowanie w JS: Przykład implementacji funkcjonalności logowania użytkownika w języku JavaScript.
64. Rejestracja w JS: Przykład implementacji funkcjonalności rejestracji użytkownika w języku JavaScript.
65. Dekodowanie tokenu JWT: Przykład dekodowania tokenu JWT w celu uzyskania informacji o użytkowniku.
66. Pobieranie danych użytkownika: Przykład implementacji funkcjonalności pobierania danych użytkownika z bazy danych.
67. Zmiana danych użytkownika: Przykład implementacji funkcjonalności zmiany danych użytkownika w bazie danych.
68. Zmiana hasła: Przykład implementacji funkcjonalności zmiany hasła użytkownika w bazie danych.
69. Usuwanie użytkownika: Przykład implementacji funkcjonalności usuwania użytkownika z bazy danych.
70. Autoryzowane zapytania w JS: Przykład implementacji autoryzowanych zapytań do serwera w języku JavaScript.
71. Zapisywanie tokenów w localStorage: Przedstawienie sposobu zapisywania tokenów autoryzacyjnych w pamięci przeglądarki za pomocą localStorage.
72. Sprawdzanie stanu zalogowania użytkownika: Implementacja funkcjonalności sprawdzania stanu zalogowania użytkownika w aplikacji.
73. Wylogowywanie: Przykład implementacji funkcjonalności wylogowywania użytkownika z aplikacji.
74. Odświeżanie tokenów podczas wykonywania zapytań: Przedstawienie sposobu odświeżania tokenów autoryzacyjnych podczas wykonywania zapytań do serwera.
75. Wylogowywanie gdy serwer zwróci 401: Implementacja automatycznego wylogowywania użytkownika w przypadku otrzymania odpowiedzi 401 od serwera.
76. Zmienne środowiskowe: Omówienie używania zmiennych środowiskowych w aplikacjach webowych.
77. Komponent Auth cz.1: Tworzenie komponentu odpowiedzialnego za funkcje autoryzacyjne — część 1.
78. Komponent Auth cz. 2: Tworzenie komponentu odpowiedzialnego za funkcje autoryzacyjne — część 2.
79. Komponent Auth cz. 3: Tworzenie komponentu odpowiedzialnego za funkcje autoryzacyjne — część 3.
80. Komponent Auth cz 4: Tworzenie komponentu odpowiedzialnego za funkcje autoryzacyjne — część 4.
81. Komponent logowania: Implementacja komponentu logowania w aplikacji.
82. Komponent rejestracji: Implementacja komponentu rejestracji w aplikacji.
83. ToDo lista z autoryzacją cz. 1: Rozszerzanie aplikacji ToDo listy o funkcje autoryzacji — część 1.
84. ToDo lista z autoryzacją cz. 2: Rozszerzanie aplikacji ToDo listy o funkcje autoryzacji — część 2.
85. Ustawianie reguł autoryzacji w Firebase: Omówienie procesu konfiguracji reguł autoryzacji w Firebase.
86. Promise.all(): Wykorzystanie funkcji Promise.all() do równoczesnego wykonywania wielu obietnic.
87. Promise.all() - rejection: Obsługa odrzucenia obietnic w funkcji Promise.all().
88. Promise.all() - własna implementacja: Implementacja własnej funkcji Promise.all().
89. Promise.allSettled(): Wykorzystanie funkcji Promise.allSettled() do obsługi wielu obietnic niezależnie od ich stanu.
90. Promise.race(): Wykorzystanie funkcji Promise.race() do obsługi wielu obietnic i zwrócenie wartości najwcześniej zakończonej.
91. Promise.any(): Wykorzystanie funkcji Promise.any() do obsługi wielu obietnic i zwrócenie wartości pierwszej zakończonej sukcesem.
92. async await: Wykorzystanie składni async/await do obsługi asynchronicznych operacji.
93. Async await catching errors: Obsługa błędów przy użyciu składni async/await.

👀 Zobacz przykładową lekcję z tego modułu kursu:

💸 Kup kurs

Kup cały kurs CodeRoad – TUTAJ

Kup ten moduł kursu – TUTAJ

💪 Odbierz bezpłatny kurs!