Fetch

Fetch API w JavaScript to nowoczesna, obietnica oparta (promise-based) alternatywa dla XMLHttpRequest. Umożliwia ono łatwe i efektywne wykonywanie zapytań sieciowych, takich jak pobieranie zasobów z sieci. Fetch jest szeroko wspierany w nowoczesnych przeglądarkach i pozwala na łatwe wykonywanie zapytań HTTP z obsługą zarówno prostych zapytań GET, jak i bardziej złożonych, wymagających użycia POST, PUT, DELETE, z możliwością dodawania nagłówków, obsługi odpowiedzi w różnych formatach i więcej.

W tej lekcji przyjrzymy się różnym przypadkom użycia Fetch API, włączając w to zapytania GET i POST, obsługę błędów, oraz jak pracować z odpowiedziami JSON.

Przykład: Zapytanie GET

Poniżej znajdziesz przykład prostej strony HTML z JavaScript, który wykonuje zapytanie GET do publicznego API i wyświetla wyniki w formacie JSON.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Przykład Fetch API - Zapytanie GET</title>
</head>
<body>
    <h3>Wynik zapytania GET</h3>
    <pre id="result"></pre>

    <script>
        // Lokalizacja elementu, w którym zostanie wyświetlony wynik
        const resultElement = document.getElementById('result');

        // Funkcja wykonująca zapytanie GET
        async function fetchData() {
            try {
                const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                const data = await response.json(); // Parsowanie odpowiedzi jako JSON
                resultElement.textContent = JSON.stringify(data, null, 2);
            } catch (error) {
                console.error('Fetch error:', error);
                resultElement.textContent = 'Error fetching data.';
            }
        }

        fetchData(); // Wywołanie funkcji podczas ładowania strony
    </script>
</body>
</html>

Podsumowanie

Fetch API jest potężnym narzędziem, które znacząco ułatwia wykonywanie zapytań sieciowych w JavaScript. Dzięki prostemu użyciu, możliwości obsługi obietnic, oraz elastyczności w konfiguracji zapytań i obsłudze odpowiedzi.

Jeżeli chcesz przyśpieszyć swoją naukę tworzenia stron chciałbym polecić mój kurs JavaScript od podstaw w którym nauczysz się tego języka od podstaw do zaawansowanych jego aspektów.

Poprzedni
Następny
Scroll to Top