Korzystanie z async/oczekiwanie w JavaScript z przykładami
- 2299
- 377
- Klaudia Woś
Async/Atait to funkcja JavaScript, która pozwala programistom pisać kod asynchroniczny w bardziej synchroniczny sposób. Dzięki asynchronizacji/oczekiwaniu programiści mogą napisać kod, który czeka na zakończenie operacji asynchronicznej, bez blokowania głównego wątku wykonania.
W tym artykule zbadamy, jak korzystać z asynchronizacji/oczekiwać w JavaScript z kilkoma przykładami.
Składnia asynchronizacji/oczekiwania
Składnia asynchronizacja/oczekiwanie jest dość proste. Aby zdefiniować funkcję asynchroniczną, dodajesz słowo kluczowe async przed słowem kluczowym funkcji, jak to:
Funkcja async getData () // kod asyncowy idzie tutaj| 123 | Funkcja async getData () // kod asyncowy idzie tutaj |
W środku Async Funkcja, możesz użyć słowa kluczowego oczekiwania, aby poczekać na obietnicę rozwiązania, tak:
Funkcja async getData () const response = czekaj na fetch ('https: // api.przykład.com/data '); Const Data = czekaj na odpowiedź.JSON (); Dane zwrotne;| 12345 | Funkcja async getData () const response = czekaj na fetch ('https: // api.przykład.com/data '); Const Data = czekaj na odpowiedź.JSON (); Zwracaj dane; |
W tym przykładzie używamy funkcji pobierania, aby złożyć żądanie HTTP, a następnie używamy słowa kluczowego oczekiwania, aby czekać na zwrócenie odpowiedzi. Następnie ponownie używamy słowa kluczowego, aby poczekać, aż dane JSON zostaną przeanalizowane przed ich zwróceniem.
Przykład: pobieranie danych z interfejsu API za pomocą async/oczekiwanie
Przyjrzyjmy się bliżej, jak używać asynchronizacji/oczekiwać, aby pobrać dane z interfejsu API. W tym przykładzie użyjemy funkcji Fetch, aby złożyć żądanie HTTP do interfejsu API GitHub, a następnie użyć async/czeka na czekanie na zwrot odpowiedzi.
Funkcja async fetchgithubuser (nazwa użytkownika) const url = 'https: // api.github.com/users/$ nazwa użytkownika '; const response = czekaj na fetch (url); Const Data = czekaj na odpowiedź.JSON (); Dane zwrotne; fetchgithubuser („Octocat”) .Następnie (dane => konsola.log (dane)) .Catch (błąd => konsola.błąd (błąd));| 12345678910 | Funkcja async fetchgithubuser (nazwa użytkownika) const url = 'https: // api.github.com/users/$ nazwa użytkownika '; const response = czekaj na fetch (url); Const Data = czekaj na odpowiedź.JSON (); Zwracaj dane; fetchgithubuser („Octocat”) .Następnie (dane => konsola.log (dane)) .Catch (błąd => konsola.błąd (błąd)); |
W tym przykładzie definiujemy nazywaną funkcję asynchroniczną Fetchgithubuser To wymaga nazwy użytkownika GitHub jako jej parametru. Wewnątrz funkcji konstruujemy adres URL żądania interfejsu API, używamy funkcji Fetch, aby złożyć żądanie, a następnie używasz słowa kluczowego oczekiwania, aby czekać na zwrócenie odpowiedzi. Następnie ponownie używamy słowa kluczowego, aby poczekać, aż dane JSON zostaną przeanalizowane przed ich zwróceniem.
Aby wywołać funkcję asynchroniczną, używamy standardowej składni obietnicy z .Następnie() Metoda radzenia sobie z przypadkiem sukcesu i .złapać() metoda obsługi wszelkich błędów.
Przykład: Korzystanie z obietnic z asynchodem/oczekiwaniem
Czasami może być konieczne użycie obietnic z asynchodem/oczekiwaniem. W tym przykładzie użyjemy Obietnica.Wszystko() Metoda do składania wielu żądań interfejsu API równolegle, a następnie użycia asynch.
| 1234567891011121314151617 | funkcja async fetchgithubdata () const urls = ['https: // api.github.com/Users/Octocat ',' https: // API.github.com/Users/Mojombo ',' https: // API.github.com/users/defunkt ']; const obromises = adresy URL.map (url => fetch (url)); const odpowiedzi = czekaj na obietnicę.wszystkie (obietnice); const Data = czekaj obietnicy.Wszystkie (odpowiedzi.mapa (odpowiedź => odpowiedź.JSON ())); Zwracaj dane; fetchgithubdata () .Następnie (dane => konsola.log (dane)) .Catch (błąd => konsola.błąd (błąd)); |
W tym przykładzie definiujemy nazywaną funkcję asynchroniczną Fetchgithubdata który konstruuje szereg adresów URL żądań API, a następnie używa mapa() metoda utworzenia szeregu obietnic, które pobierają dane z każdego adresu URL. Następnie używamy Obietnica.Wszystko() Metoda oczekiwania na wypełnienie wszystkich żądań przed kontynuowaniem.
Po otrzymaniu wszystkich odpowiedzi używamy mapa() Metoda ponownie, aby utworzyć szereg obietnic, które będą parsować dane JSON na podstawie każdej odpowiedzi. Następnie ponownie używamy słowa kluczowego, aby poczekać na zakończenie wszystkich tych obietnic przed zwróceniem danych jako tablicy obiektów.
Najlepsze praktyki stosowania asynchronizacji/oczekiwania
Oto kilka najlepszych praktyk korzystania z asynchronizacji/oczekiwania w kodzie JavaScript:
- Zawsze obsługuje błędy: Kod asynchroniczny może być podatny na błędy, dlatego ważne jest, aby zawsze obsługiwać je prawidłowo. Możesz użyć próbuj złapać bloki, aby złapać błędy w funkcji asynchronizacji lub możesz użyć
.złapać()Metoda obietnicy obsługi błędów w kodzie wywołania. - Nie nadużywaj asynchronizacji/nie czekaj: Podczas gdy asynchronizacja/oczekiwanie może ułatwić kod asynchroniczny do odczytania i pisania, nie zawsze jest to konieczne lub odpowiednie. Używaj tylko asynchronizacji/oczekuj, gdy trzeba czekać na obietnicę rozwiązania przed kontynuowaniem.
- Użyj obietnicy.All () dla równoległych żądań: Jeśli potrzebujesz wielu żądań API równolegle, użyj
Obietnica.Wszystko()Metoda oczekiwania na wypełnienie wszystkich żądań przed kontynuowaniem. - Nie blokuj głównego wątku: Pamiętaj, że kod asynchroniczny ma działać w tle, więc unikaj blokowania głównego wątku wykonania. Jeśli kod zajmuje dużo czasu, rozważ użycie pracownika internetowego, aby uruchomić go w tle.
- Utrzymuj funkcje małe i skupione: Podobnie jak w przypadku każdej funkcji, ważne jest, aby funkcje asynchroniczne są małe i skoncentrowane. Jeśli funkcja robi zbyt wiele, rozważ rozbicie jej na mniejsze, bardziej skoncentrowane funkcje.
Wniosek
Async/Atah to potężna funkcja JavaScript, która może ułatwić kod asynchroniczny. Korzystając z słowa kluczowego oczekiwania na rozwiązywanie obietnic, możesz napisać kod, który wygląda bardziej jak synchroniczny kod. Pamiętaj tylko, aby prawidłowo obsługiwać błędy, użyj obietnicy.all () dla równoległych żądań i unikaj blokowania głównego wątku wykonania.