Lekcja 17: Fetch API - Wykonywanie zapytań sieciowych

Współczesne aplikacje internetowe często muszą komunikować się z serwerami, aby pobierać lub wysyłać dane. Historycznie służył do tego obiekt XMLHttpRequest, ale jego API jest uważane za nieco przestarzałe i skomplikowane. Nowoczesnym standardem do wykonywania zapytań sieciowych w JavaScript jest Fetch API.

Fetch API dostarcza globalną funkcję fetch(), która w prosty i elastyczny sposób pozwala na wysyłanie asynchronicznych żądań HTTP i odbieranie odpowiedzi. Bazuje ona na Obietnicach (Promises), co doskonale integruje się z poznanymi wcześniej mechanizmami .then()/.catch() oraz async/await.

Podstawowe użycie fetch()

Najprostsze użycie fetch() polega na przekazaniu adresu URL zasobu, który chcemy pobrać. Domyślnie wykonuje ono żądanie typu GET.

Funkcja fetch() zwraca obietnicę, która rozwiązuje się do obiektu Response reprezentującego odpowiedź serwera (nawet jeśli jest to odpowiedź z błędem HTTP, np. 404 Not Found lub 500 Internal Server Error).

const apiUrl = 'https://jsonplaceholder.typicode.com/posts/1'; // Przykładowe publiczne API

console.log("Wysyłanie żądania fetch...");

fetch(apiUrl)
    .then(response => {
        // Pierwszy .then() otrzymuje obiekt Response
        console.log("Otrzymano odpowiedź (obiekt Response):", response);

        // Sprawdzenie statusu odpowiedzi
        // fetch() nie odrzuca obietnicy dla błędów HTTP (4xx, 5xx)
        // Musimy sami sprawdzić właściwość response.ok lub response.status
        if (!response.ok) {
            // Jeśli status nie jest OK (np. 404, 500), rzucamy błąd
            throw new Error(`Błąd HTTP! Status: ${response.status}`);
        }

        // Odpowiedź trzeba przetworzyć, np. odczytać jako JSON
        // Metody .json(), .text(), .blob() itp. również zwracają Promise!
        console.log("Przetwarzanie odpowiedzi jako JSON...");
        return response.json(); // Zwraca Promise rozwiązujący się do sparsowanego JSON
    })
    .then(data => {
        // Drugi .then() otrzymuje przetworzone dane (w tym przypadku obiekt JSON)
        console.log("Otrzymane dane (JSON):", data);
        // Możemy teraz użyć danych
        // np. document.body.innerHTML = `
${data.title}
${data.body}
`;
    })
    .catch(error => {
        // .catch() złapie błędy sieciowe (np. brak połączenia)
        // oraz błędy rzucone przez nas (np. z powodu response.ok === false)
        console.error("Wystąpił błąd podczas fetch:", error);
    });

console.log("Żądanie fetch wysłane (operacja asynchroniczna)...");

Ważne: Obietnica zwracana przez fetch() jest odrzucana tylko w przypadku błędów sieciowych uniemożliwiających nawiązanie połączenia (np. problem z DNS, brak połączenia internetowego). Błędy HTTP (jak 404 czy 500) nie powodują odrzucenia obietnicy. Musimy sami sprawdzić status odpowiedzi w pierwszym .then() za pomocą właściwości response.ok (true dla statusów 200-299) lub response.status.

Obiekt Response

Obiekt Response zawiera informacje o odpowiedzi serwera oraz metody do odczytania jej treści (body). Najważniejsze właściwości i metody:

• response.ok: Boolean wskazujący, czy status odpowiedzi jest w zakresie sukcesu (200-299).
• response.status: Kod statusu HTTP (np. 200, 404, 500).
• response.statusText: Tekst statusu HTTP (np. "OK", "Not Found").
• response.headers: Obiekt typu Headers z nagłówkami odpowiedzi.
• response.url: Końcowy URL, z którego przyszła odpowiedź (może się różnić od pierwotnego z powodu przekierowań).
• response.json(): Odczytuje treść odpowiedzi i parsuje ją jako JSON. Zwraca Promise.
• response.text(): Odczytuje treść odpowiedzi jako zwykły tekst. Zwraca Promise.
• response.blob(): Odczytuje treść odpowiedzi jako obiekt Blob (dane binarne). Zwraca Promise.
• response.formData(): Odczytuje treść odpowiedzi jako obiekt FormData. Zwraca Promise.
• response.arrayBuffer(): Odczytuje treść odpowiedzi jako ArrayBuffer (niskopoziomowe dane binarne). Zwraca Promise.

Uwaga: Treść odpowiedzi (body) można odczytać tylko raz za pomocą jednej z metod (.json(), .text() itp.). Próba ponownego odczytania spowoduje błąd.

Konfiguracja żądania (drugi argument fetch)

Funkcja fetch() może przyjąć drugi, opcjonalny argument - obiekt konfiguracyjny, który pozwala dostosować żądanie, np. zmienić metodę HTTP, dodać nagłówki czy wysłać dane.

const postApiUrl = 'https://jsonplaceholder.typicode.com/posts';

const nowyPost = {
    title: 'foo',
    body: 'bar',
    userId: 1,
};

const opcjeFetch = {
    method: 'POST', // Metoda HTTP
    headers: {
        'Content-Type': 'application/json; charset=UTF-8', // Informujemy serwer, że wysyłamy JSON
        // Można dodać inne nagłówki, np. autoryzacyjne
        // 'Authorization': 'Bearer moj_token'
    },
    body: JSON.stringify(nowyPost) // Dane do wysłania (muszą być stringiem!)
};

console.log("Wysyłanie żądania POST...");

fetch(postApiUrl, opcjeFetch)
    .then(response => {
        if (!response.ok) {
            // Sprawdzenie statusu - ważne np. dla POST, PUT, DELETE
            // Status 201 Created jest też OK
            throw new Error(`Błąd HTTP! Status: ${response.status}`);
        }
        // Zazwyczaj odpowiedź na POST zawiera utworzony zasób lub potwierdzenie
        return response.json();
    })
    .then(data => {
        console.log("Odpowiedź serwera na POST:", data);
        // Przykładowa odpowiedź z jsonplaceholder: { id: 101, title: 'foo', ... }
    })
    .catch(error => {
        console.error("Błąd podczas wysyłania POST:", error);
    });

Najczęściej używane opcje w obiekcie konfiguracyjnym:

• method: Metoda HTTP (np. 'GET', 'POST', 'PUT', 'DELETE', 'PATCH'). Domyślnie 'GET'.
• headers: Obiekt z nagłówkami żądania (np. {'Content-Type': 'application/json'}).
• body: Treść żądania (dane do wysłania). Musi być stringiem (np. po użyciu JSON.stringify() dla danych JSON) lub obiektem typu Blob, BufferSource, FormData, URLSearchParams, ReadableStream. Nie można używać body z metodami GET i HEAD.
• mode: Tryb żądania ('cors', 'no-cors', 'same-origin'). Domyślnie 'cors'. Wpływa na politykę Cross-Origin Resource Sharing.
• cache: Kontrola cache przeglądarki ('default', 'no-store', 'reload', 'no-cache', 'force-cache', 'only-if-cached').
• credentials: Czy wysyłać ciasteczka i nagłówki autoryzacyjne ('include', 'same-origin', 'omit').
• signal: Obiekt AbortSignal pozwalający na przerwanie żądania (np. po kliknięciu przycisku "Anuluj").

Fetch z async/await

Użycie fetch ze składnią async/await jest bardzo popularne i często prowadzi do bardziej czytelnego kodu, zwłaszcza przy obsłudze błędów za pomocą try...catch.

async function pobierzDanePosta(postId) {
    const url = `https://jsonplaceholder.typicode.com/posts/${postId}`;
    console.log(`Pobieranie posta ${postId} (async/await)...`);

    try {
        // Oczekiwanie na odpowiedź (obiekt Response)
        const response = await fetch(url);
        console.log("Otrzymano odpowiedź (async/await):", response.status);

        // Sprawdzenie statusu
        if (!response.ok) {
            throw new Error(`Błąd HTTP! Status: ${response.status}`);
        }

        // Oczekiwanie na sparsowanie JSON
        const data = await response.json();
        console.log(`Dane posta ${postId} (async/await):`, data);
        return data;

    } catch (error) {
        console.error(`Błąd podczas pobierania posta ${postId} (async/await):`, error);
        // Można tu rzucić błąd dalej lub zwrócić null/wartość domyślną
        throw error;
    }
}

// Wywołanie funkcji async
(async () => {
    try {
        const post1 = await pobierzDanePosta(1);
        const post5 = await pobierzDanePosta(5);
        console.log("Pobrano posty 1 i 5.");

        // Próba pobrania nieistniejącego posta (spowoduje błąd 404)
        const postNieistniejacy = await pobierzDanePosta(9999);

    } catch (error) {
        // Złapanie błędu rzuconego przez pobierzDanePosta
        console.error("Ostateczny błąd w bloku IIFE:", error.message);
    }
})(); // Użycie IIFE (Immediately Invoked Function Expression) do wywołania async

async function pobierzUzytkownikow() {
    const url = 'https://jsonplaceholder.typicode.com/users';
    console.log("Pobieranie listy użytkowników...");

    try {
        const response = await fetch(url);
        console.log("Status odpowiedzi:", response.status);

        if (!response.ok) {
            throw new Error(`Błąd HTTP! Status: ${response.status}`);
        }

        const uzytkownicy = await response.json();
        console.log("Pobrano dane użytkowników.");
        return uzytkownicy;

    } catch (error) {
        console.error("Błąd podczas pobierania użytkowników:", error);
        throw error; // Rzucamy błąd dalej
    }
}

// Wywołanie i obsługa wyniku
(async () => {
    try {
        const listaUzytkownikow = await pobierzUzytkownikow();
        if (listaUzytkownikow && listaUzytkownikow.length > 0) {
            console.log(`Pobrano ${listaUzytkownikow.length} użytkowników.`);
            console.log(`Imię pierwszego użytkownika: ${listaUzytkownikow[0].name}`);
        } else {
            console.log("Nie pobrano żadnych użytkowników lub lista jest pusta.");
        }
    } catch (error) {
        console.error("Nie udało się przetworzyć danych użytkowników:", error.message);
    }
})();