Wyjaśnienie API pobierania JavaScript

Interfejs JavaScript Fetch API oferuje przejrzyste i zrozumiałe podejście do inicjowania zapytań z poziomu aplikacji klienckiej, działającej w środowisku przeglądarki internetowej.

Charakteryzuje się prostotą obsługi oraz wykorzystaniem nowoczesnej składni języka JavaScript. Niniejszy artykuł stanowi kompleksowy przewodnik po użytkowaniu interfejsu Fetch API.

Czym jest JavaScript Fetch API?

JavaScript Fetch API to interfejs, który jest dostępny w nowoczesnych przeglądarkach, umożliwiający przesyłanie żądań z interfejsu użytkownika. Jest on alternatywą dla starszego mechanizmu AJAX, opartego na XMLHttpRequest.

Dostęp do niego uzyskuje się poprzez funkcję globalną o nazwie fetch. Wywołanie tej funkcji, z odpowiednimi argumentami, zwraca obietnicę, która po spełnieniu staje się odpowiedzią. Za pomocą funkcji fetch można realizować różnorodne żądania HTTP.

Zalety Fetch API w porównaniu z innymi metodami

• Interfejs jest bardziej przejrzysty i intuicyjny, co sprawia, że nauka i obsługa są łatwiejsze. W konsekwencji, kod staje się bardziej czytelny przy użyciu Fetch API. XMLHttpRequest jest bardziej skomplikowany, a kod nie osiąga tej samej przejrzystości, co w przypadku Fetch API.
• Wspiera obietnice, co umożliwia bardziej uporządkowane pisanie kodu asynchronicznego. XMLHttpRequest nie obsługuje obietnic, co zmusza do korzystania z funkcji zwrotnych w procedurach obsługi zdarzeń. Wybór między Fetch API a XMLHttpRequest zależy od preferencji programisty.
• Jest natywnie wspierany przez przeglądarki, co eliminuje potrzebę dodawania dodatkowych bibliotek do wysyłania zapytań. Dodatkowe biblioteki zwiększają rozmiar pakietu JavaScript i mogą spowolnić działanie strony.

Wykorzystanie interfejsu API pobierania

W tej sekcji omówimy, jak generować różne rodzaje żądań za pomocą interfejsu JavaScript Fetch API. Do tworzenia kodu możesz wykorzystać dowolny edytor, który preferujesz. Ważne jest, aby uruchomić kod w przeglądarce. W dalszej części umieścimy go wewnątrz znacznika skryptu w pliku HTML.

Proste żądanie GET

Na początku nauczymy się, jak stworzyć proste żądanie get. Kod potrzebny do wykonania tej operacji ma następującą formę:

fetch(url)

Dlatego, jeśli naszym celem byłoby pobranie postów z interfejsu API JSON Placeholder, należałoby to zrobić w ten sposób:

fetch('https://jsonplaceholder.typicode.com/posts');

Wywołanie funkcji zwróci obietnicę, która rozwiąże się w postaci odpowiedzi API lub błędu, jeśli wystąpił. W celu uzyskania dostępu do odpowiedzi, użyjemy słowa kluczowego await. Jednak słowa kluczowego await można używać tylko wewnątrz funkcji asynchronicznej.

Zatem, umieścimy funkcję fetch wewnątrz funkcji asynchronicznej i ją wywołamy. Jeśli nie czujesz się pewnie w temacie asynchronicznego JavaScript, możesz znaleźć szczegółowy przewodnik. Kod wygląda następująco:

async function getData() {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts');
    console.log(response);
}

getData();

Po uruchomieniu powyższego kodu, powinieneś otrzymać podobny wynik.

Wynik pokazuje, że funkcja fetch zwróciła obiekt odpowiedzi. Obiekt ten posiada właściwości takie jak status, nagłówki i treść. Dane odpowiedzi są przechowywane w treści w postaci ciągu JSON. Dlatego musimy wyodrębnić ten ciąg i przeanalizować go jako kod JSON, aby uzyskać dane jako obiekt JavaScript.

Na szczęście, obiekt Response zawiera przydatną metodę o nazwie json(). Ta metoda odczytuje treść odpowiedzi i próbuje przeanalizować ją jako JSON. Zwraca obietnicę, która finalizuje się jako obiekt przeanalizowany z JSON.

Niemniej jednak, ta metoda zgłosi błąd, jeśli treść nie będzie prawidłowym ciągiem JSON. Dlatego, powinniśmy analizować kod JSON jedynie, gdy odpowiedź ma kod statusu 200.

Zatem, kod do pobrania postów będzie wyglądał tak:

async function getData() {
    const response = await fetch(
        "https://jsonplaceholder.typicode.com/posts"
    );

    if (response.status == 200) {
        const posts = await response.json();
        console.log(posts);
    } else {
        console.log("Something went wrong:", response.status);
    }
}
getData();

Uruchomienie powyższego kodu da następujące rezultaty:

Jest to tablica zawierająca sto postów.

Niektóre punkty końcowe API wymagają użycia nagłówków. Nagłówki te mogą być używane na przykład do autoryzacji. JavaScript Fetch API oferuje łatwy sposób wysyłania nagłówków w ramach żądania. Aby określić nagłówki, trzeba przekazać argument opcji do wywołania funkcji fetch.

fetch(url, options);

Zatem, nasz poprzedni przykład wyglądałby teraz tak:

async function getData() {
    const response = await fetch(
        "https://jsonplaceholder.typicode.com/posts", {
             headers: {
                 'x-auth': '<your auth token>'
             }
         }
    );

    if (response.status == 200) {
        const posts = await response.json();
        console.log(posts);
    } else {
        console.log("Something went wrong:", response.status);
    }
}
getData();

Ponieważ API JSONPlaceholder nie wymaga nagłówka autoryzacyjnego, powyższy kod będzie działał tak samo jak poprzednio. Warto jednak wiedzieć, że istnieje możliwość przekazywania nagłówków.

Przekazywanie innych opcji

Oprócz przekazywania nagłówków, można także przekazać wiele innych opcji do funkcji fetch. Dwie najczęściej używane opcje to metoda żądania oraz opcje dotyczące treści żądania.

Wyślemy żądanie POST do API JSONPlaceholder, aby zademonstrować, jak przekazać obie te opcje. Oto kod do tego:

async function getData() {
    const response = await fetch(
        "https://jsonplaceholder.typicode.com/posts", {
             method: 'POST',
             body: JSON.stringify({ 
                 title: 'Fetch API',
                 body: 'Lorem Ipsum',
                 userId: 1,
             })
        }
    );

    if (response.status == 200) {
        const posts = await response.json();
        console.log(posts);
    } else {
        console.log("Something went wrong:", response.status);
    }
}
getData();

W naszym obiekcie opcji określamy metodę żądania, którą chcemy użyć, oraz treść jako właściwości. Dla obu właściwości podajemy argumenty w postaci ciągów znaków. Jako metodę żądania podaliśmy ciąg „POST”, ponieważ chcemy wysłać żądanie POST. Używamy także ciągu JSON dla właściwości body. Ten ciąg JSON powstaje poprzez serializację obiektu zawierającego wymagane właściwości.

Uruchomienie tego kodu w przeglądarce da następujący wynik:

Wynik to obiekt zawierający identyfikator, który otrzymaliśmy od serwera. Tutaj znajduje się przydatne źródło, gdzie można znaleźć pełną listę opcji, które można przekazać.

Błędy podczas korzystania z JavaScript Fetch API

#1. Błędy sieciowe

Podczas wysyłania żądań sieciowych często pojawiają się błędy. Funkcja fetch zwraca obietnicę, która zostaje rozpatrzona jako wynik lub odrzucona w przypadku napotkania błędu sieciowego. Dlatego musimy zawrzeć nasz kod w bloku try/catch, aby sprawnie obsługiwać błędy sieciowe.

#2. Inne błędy

Oprócz błędów sieciowych, mogą wystąpić także inne błędy, takie jak 404, 403 i 500. Funkcja fetch nie zgłasza błędu w przypadku napotkania takich błędów. Dlatego należy je sprawdzić poprzez analizę kodu stanu odpowiedzi. Na przykład, w poprzednich przykładach próbowaliśmy przeanalizować treść odpowiedzi tylko wtedy, gdy kod stanu wynosił 200.

#3. Błędy CORS

Innym, często spotykanym typem błędów są błędy CORS. CORS oznacza współdzielenie zasobów między różnymi źródłami. Źródło to unikalne połączenie protokołu, hosta i portu serwera. Przykładowo, moja strona internetowa może działać na lokalnym hoście na porcie 5500 z protokołem HTTP. W związku z tym, początkiem tej strony będzie http://localhost:5500.

Ta sama strona internetowa wysyła żądanie API do interfejsu https://jsonplaceholder.typicode.com, które jest innego pochodzenia. Tak więc, te dwa źródła, localhost i JSONPlaceholder, współdzielą zasoby. Jest to dzielenie zasobów pomiędzy różnymi źródłami. Jednak, aby to działało, serwer API musi zezwalać na CORS. Nie zawsze tak jest. Rozwiązaniem tego problemu jest wysyłanie żądań za pośrednictwem serwera proxy, który obsługuje CORS.

Wsparcie przeglądarek

Fetch API jest stosunkowo nowoczesną funkcją. Zgodnie z informacjami z CanIUse.com, około 95% użytkowników na świecie korzysta z przeglądarek, które ją wspierają.

Podsumowanie

JavaScript Fetch API to zgrabniejsze i bardziej eleganckie podejście do tworzenia frontendu wysyłającego żądania API. Ze względu na ograniczoną obsługę w przeglądarkach, można rozważyć użycie innych bibliotek klienckich HTTP.