Jak pobrać dane z interfejsu API w JavaScript

Podczas budowania rzeczywistej aplikacji w JavaScript aplikacja musi wchodzić w interakcje Pszczoła wysyłać i odbierać dane. W JavaScript istnieje wiele sposobów interakcji z interfejsem API, ale najczęstszym i najbardziej podstawowym sposobem interakcji z API jest użycie Aportować() Metoda z Fetch API dostarczone przez przeglądarkę. W tym poście dowiemy się, jak uzyskać dane z Mock API Za pomocą waniliowego JavaScript i Fetch API.

Metoda fetch ()

Ta metoda służy do gromadzenia danych z dowolnego interfejsu API, który odpowiada na żądanie klienta w formie JSON lub XML. Składnia metody pobierania jest dość prosta, wymaga tylko jednego obowiązkowego argumentu i jednego parametru opcjonalnego jako

Fetch (URL, opcje);

• URL: URL API, aby dotrzeć i poprosić o odpowiedź w formie JSON Lub XML
• Opcje: opcjonalne parametry, które pomagają nam zmienić żądanie z "Dostawać" Do "post" i inne warianty
• Notatka: Metoda Fetch zwraca obietnicę

Aby użyć metody fetch () w JavaScript, musisz ją owinąć w funkcję asynchroniczną i wywołać ten fetch (). Z funkcją asynchodawą składnia jest zdefiniowana jako

Funkcja async funkcja_identifier (url)
const response = czekaj na fetch (url);
var data = czekaj na odpowiedź.JSON ();

Pobieranie danych z interfejsu API za pomocą metody fetch () w JavaScript

Aby przetestować metodę fetch () w celu pobrania danych z interfejsu API, potrzebujesz manekina interfejsu API lub fałszywego interfejsu API. W tym celu używamy manekina dostarczonego przez Req | res z adresem URL "https: // reqRes.in/API/Products/3".

Drugą rzeczą, której potrzebujemy, jest podstawowe zrozumienie tego, jak obietnice Pracuj w JavaScript, aby dowiedzieć się o obietnicach w JavaScript, możesz odwiedzić ten link.

Następnie potrzebujemy manekina HTML z kilkoma podstawowymi elementami w niej. W tym przykładzie użyliśmy następujących wierszy w HTML:

Pobieranie danych z API

To powinno dać nam następującą stronę internetową:

W przypadku kodu JavaScript pierwszą rzeczą, którą musimy zrobić, jest przechowywanie adresu URL w osobnej zmiennej z następującym wierszem:

const url = "https: // reqRes.in/API/Products/3 ”;

Następnie definiujemy Funkcja asynchroniczna Aby uzyskać dane z interfejsu API za pomocą URL Właśnie przechowyliśmy następujące wiersze:

funkcja async getDataFromapi (url)
const response = czekaj na fetch (url);
var data = czekaj na odpowiedź.JSON ();
konsola.log (dane);

W tym kodzie robimy to, że czekamy na obietnica z Fetch (URL) i przechowywanie tej obietnicy w środku odpowiedź zmienny.

Po uzyskaniu obietnicy musimy przekonwertować ją w format JSON za pomocą odpowiedź.JSON (). Od odpowiedź.JSON () jest również obietnicą, że zwraca dane, używamy słowa kluczowego czekać na.

Na koniec drukujemy dane pobierane z interfejsu API za pomocą funkcji dziennika konsoli.

Teraz wszystko, co musimy zrobić, to wywołać tę funkcję asynchroniczną i przekazać adres URL interfejsu API z następującym wierszem:

getDatafromapi (URL);

Kompletny fragment kodu to:

const url = "https: // reqRes.in/API/Products/3 ”;
funkcja async getDataFromapi (url)
const response = czekaj na fetch (url);
var data = czekaj na odpowiedź.JSON ();
konsola.log (dane);

getDatafromapi (URL);

Jeśli uruchomisz tę stronę internetową i przejdziesz do konsoli w narzędzi programistycznych przeglądarki, zobaczysz następujące dane wyjściowe:

To wszystko, pomyślnie pobrałeś dane z interfejsu API za pomocą JavaScript.

Wniosek

aportować() Metoda z Fetch API może być użyte do pobierania danych z API W waniliowym JavaScript. Kiedy pracujesz z rzeczywistymi aplikacjami, musisz wiedzieć, jak wchodzić w interakcje z interfejsem API do wysyłania i odbierania danych. W tym poście omówiliśmy metodę Fetch (), aby wysłać REQ do Mock API i otrzymaliśmy dane z tego interfejsu API, a następnie przekonwertowaliśmy te dane na JSON za pomocą obietnic, aby można je było wykorzystać w naszej aplikacji.