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!