Jak używać API Fetch w JavaScript

W tworzeniu stron internetowych często będziesz musiał połączyć/komunikować się z innymi serwerami internetowymi, aby uzyskać informacje/dane. Na przykład, rejestrując nowe konto na niektórych stronach internetowych. Umożliwia to zapisanie się na nowe konto za pomocą jednego kliknięcia zamiast ręcznego wypełnienia całego formularza. Po wybraniu opcji „Zarejestruj się przy użyciu konta stron trzecich”, aplikacja komunikuje się z serwerem aplikacji zewnętrznej i wysyła żądanie dostępu do twoich informacji, które są tam przechowywane. To żądanie jest wysyłane za pośrednictwem interfejsu API, które jest zestawem reguł regulujących sposób komunikacji różnych aplikacji lub systemów. W tym artykule nauczymy się używać JavaScript do wysyłania takich wniosków.

Co to jest API Fetch

Fetch API zapewnia proste aportować() Metoda w JavaScript, która jest używana do pobierania, uzyskiwania dostępu i manipulowania zasobami w całej sieci. aportować() Metoda pozwala na wykonanie wywołania asynchronicznego JavaScript i XML (AJAX) z JavaScript, które były wcześniej wykonane za pomocą XMLHTTPREQUEST. Żądania asynchroniczne działają równolegle do programu głównego i nie zatrzymują wykonywania kodu poniżej. Kod poniżej żądania API Fetch będzie działał, nawet jeśli interfejs API nie odesłał żadnej odpowiedzi. Kiedy API odpowiada na połączenie Ajax, to aportować() Metoda jest wznowiona.

Fetch API wykorzystuje obietnice i zapewnia potężne funkcje, które znacznie ułatwiają obsługę żądań sieci i ich odpowiedzi; Jest to świetny sposób na uniknięcie piekieł wywoławczych, które zostały utworzone podczas korzystania.

Notatka: Konsola przeglądarki służy do demonstracji przykładów w tym artykule.

Składnia API Fetch w JavaScript

Musimy zadzwonić aportować() metoda, aby użyć API Fetch w naszym kodzie JavaScript. aportować() Metoda bierze adres URL API jako argument.

Fetch (URL)

Musimy zdefiniować Następnie() metoda po aportować() metoda:

.Następnie (funkcja ()
)

Wartość zwracająca aportować() Metoda jest obietnicą. Jeśli obietnica zostanie rozwiązana, kod obecny w treści Następnie() Metoda jest wykonywana. Ciało Następnie() Metoda powinna zawierać kod, który może obsługiwać dane wysyłane przez interfejs API.

Następnie musimy zdefiniować złapać() metoda; złapać() Metoda wykonuje tylko w przypadku odrzucenia obietnicy:

.catch (funkcja ()
);

W sumie aportować() Metoda powinna wyglądać mniej więcej tak:

Fetch (URL)
.Następnie (funkcja ()
)
.catch (funkcja ()
);

Teraz, gdy rozumiemy składnię API Fetch, możemy teraz przejść do rzeczywistych przykładów korzystania z fetch() Metoda na prawdziwym interfejsie API.

Jak użyć metody Fetch, aby uzyskać dane z interfejsu API

W tym przykładzie użyjemy interfejsu API użytkownika GitHub, aby uzyskać dane informacji o użytkowniku i wyświetlić je na konsoli za pomocą tylko waniliowego javascript; więc zacznijmy:

Najpierw utworzymy zmienną o nazwie URL; Ta zmienna pomieści adres URL interfejsu API, który zwróci repo użytkownika nazwanego Fabpot:

const url = 'https: // api.github.com/Users/FabPot/Repos ';

Teraz użyjemy aportować() metoda wywołania interfejsu API użytkownika GitHub;

Fetch (URL)

aportować() Metoda bierze adres URL jako argument:

Fetch (URL)
.następnie (funkcja (data)
)
)
.catch (funkcja (błąd)
);

W powyższym kodzie nazywamy API Fetch, aby uzyskać repozytoria nazwiska użytkownika Fabpot z github. Przekazaliśmy adres URL do interfejsu API użytkownika GitHub jako argument do pobierania interfejsu API. Następnie API wysyła odpowiedź, która jest obiektem z serią metod; Metody te można wykorzystać do wykonywania różnych funkcji w otrzymanych informacji. Jeśli chcemy przekonwertować obiekt na JSON, możemy użyć metody JSON ().

Aby przekonwertować obiekt na JSON, musimy dodać Następnie() metoda. Następnie() Metoda będzie zawierać funkcję; Funkcja przyjmie argument zwany odpowiedź:

Fetch (URL)
.Następnie ((odpowiedz) =>)

Parametr odpowiedzi służy do przechowywania obiektu, który jest zwracany z interfejsu API. Ten obiekt jest konwertowany na dane JSON za pomocą metody JSON ():

Fetch (URL)
.Następnie ((odpowiedz) => Odpowiedź.JSON ())

Teraz możemy wyświetlić dane w postaci JSON, dodając kolejne Następnie() oświadczenie; Ta instrukcja zawiera funkcję, która przyjmuje zmienną nazwaną dane jako argument:

.następnie (funkcja (data)
)
)

Następnie używamy konsoli.Metoda log () wewnątrz ciała funkcji, aby wyświetlić dane na konsoli.

.następnie (funkcja (data)
konsola.log (dane);
)

Teraz dodamy funkcję catch (), aby zarejestrować potencjalny błąd do konsoli na wypadek niespełnienia obietnicy:

.Catch (err
konsola.błąd (err);
);

Podsumowując, prośba o uzyskanie listy repozytoriów użytkownika z GitHub powinno wyglądać tak:

Fetch (URL)
.Następnie ((odpowiedz) => Odpowiedź.JSON ())
.Następnie ((data) =>
konsola.log (dane);
)
.Catch (err
konsola.błąd (err);
);

Na zrzucie ekranu podanym powyżej obietnicy zostało rozwiązane, a ciało .Następnie() Metoda została wykonana. Gdyby obietnica pozostała nierozwiązana z jakiegoś powodu, to ciało .złapać() Wykonanoby metodę, która dokonałaby wszystkich obsługi błędów. Właśnie użyliśmy .złapać() Metoda wydrukowania komunikatu o błędzie na wypadek niespełnienia obietnicy.

Wniosek

Komunikowanie i pobieranie danych ze źródeł zewnętrznych jest istotną częścią tworzenia stron internetowych. Osiągnięto go przy użyciu złożonego narzędzia o nazwie XMLHTTPREQUEST, które spowodowało odwołanie; Teraz znacznie prostsze narzędzie o nazwie Fetch API służy do wysyłania połączeń Ajax w waniliowym JavaScript, ponieważ jest znacznie lepsze w radzeniu sobie z żądaniami AJAX. W tym poście nauczyliśmy się używać metody Fetch API do wykonywania połączeń Ajax w waniliowym JavaScript.