Fetch API w JavaScript: Przewodnik dla początkujących 🌐
Fetch API w JavaScript to mega przydatne narzędzie, które znacznie ułatwia tworzenie aplikacji internetowych poprzez obsługę zapytań sieciowych.
Jeśli dopiero zaczynasz przygodę z programowaniem, zapraszam do mojej kategorii o pierwszych krokach w nauce programowania.
Dzięki Fetch API możemy w prosty sposób wysyłać żądania HTTP, pobierać dane z API, przesyłać informacje na serwer, a wszystko to w sposób asynchroniczny, co jest kluczowe w nowoczesnych aplikacjach.
W tym wpisie omówimy, jak działa Fetch API, jak używać różnych typów żądań (GET, POST, PUT, PATCH, DELETE) oraz jak zarządzać błędami i odpowiedziami z serwera.
Jeśli interesują Cię inne technologie związane z tworzeniem stron internetowych, przeczytaj mój artykuł na temat co to jest i jak działa DOM.
Czym Jest Fetch API w JavaScript? 🤔
Fetch API to wbudowany interfejs w przeglądarkach, umożliwiający wykonywanie asynchronicznych zapytań HTTP do serwera. Jest to nowocześniejsza alternatywa dla przestarzałego mechanizmu XMLHttpRequest, oferująca czytelniejszą i bardziej efektywną pracę z danymi.
Dzięki Fetch API możemy przesyłać dane w formacie JSON, a także korzystać z różnych metod HTTP, takich jak GET, POST, PUT i DELETE. Co więcej, Fetch API wykorzystuje promisy (promises), co umożliwia elegancką obsługę błędów za pomocą metod .then() i .catch().
Jeśli chcesz dowiedzieć się więcej o API, sprawdź mój wpis co to jest API.
Jak Działa Fetch API? 🔄
Podstawowe użycie Fetch API wymaga wywołania funkcji fetch(), gdzie jako parametr podajemy adres URL oraz ewentualne dodatkowe opcje, takie jak metoda, nagłówki (headers) czy treść zapytania (body). Oto przykład prostego zapytania GET:
fetch("https://jsonplaceholder.typicode.com/users/1")
.then((response) => response.json()) // Konwersja odpowiedzi na JSON
.then((data) => console.log(data)) // Wyświetlenie danych w konsoli
.catch((error) => console.error("Błąd:", error));
Jeśli interesuje Cię więcej o JavaScript, możesz też sprawdzić mój artykuł co to jest JavaScript.
Wysyłanie Zapytania GET z Fetch API 🔎
Najczęściej stosowaną metodą HTTP jest GET, służąca do pobierania danych z serwera. Przykład:
fetch("https://jsonplaceholder.typicode.com/posts/1")
.then((response) => response.json()) // Konwersja odpowiedzi na JSON
.then((data) => console.log(data)) // Wyświetlenie danych w konsoli
.catch((error) => console.error("Błąd podczas pobierania danych:", error));
W tym przypadku zapytanie GET pobiera post o ID 1, a wynik jest przetwarzany jako JSON.
Użycie Async/Await z Fetch API
Korzystanie z async/await upraszcza kod asynchroniczny, czyniąc go bardziej czytelnym. Oto przykład:
async function fetchPost() {
try {
const response = await fetch(
"https://jsonplaceholder.typicode.com/posts/1"
);
const data = await response.json();
console.log(data);
} catch (error) {
console.error("Błąd:", error);
}
}
fetchPost();
Wysyłanie Zapytania POST z Fetch API 📝
Metoda POST służy do wysyłania danych na serwer. Oto przykład:
fetch("https://jsonplaceholder.typicode.com/posts", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
title: "Nowy post",
body: "Treść nowego postu",
userId: 1,
}),
})
.then((response) => response.json())
.then((data) => console.log(data))
.catch((error) => console.error("Błąd:", error));
Wysyłanie Zapytania PUT z Fetch API 🔄
Metoda PUT służy do aktualizacji istniejących zasobów na serwerze. Przykład:
fetch("https://jsonplaceholder.typicode.com/posts/1", {
method: "PUT",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
id: 1,
title: "Zaktualizowany post",
body: "Zaktualizowana treść postu",
userId: 1,
}),
})
.then((response) => response.json())
.then((data) => console.log(data))
.catch((error) => console.error("Błąd:", error));
Jeśli interesuje Cię więcej o Node.js, możesz zajrzeć do mojego wpisu o co to jest Node i jak działa.
Wysyłanie Zapytania PATCH z Fetch API 🛠️
Podobnie jak PUT, metoda PATCH służy do aktualizacji zasobów, ale w mniejszym zakresie:
fetch("https://jsonplaceholder.typicode.com/posts/1", {
method: "PATCH",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ title: "Zaktualizowany tytuł" }),
})
.then((response) => response.json())
.then((data) => console.log(data))
.catch((error) => console.error("Błąd:", error));
Usuwanie Danych z Fetch API za Pomocą DELETE 🚮
Metoda DELETE umożliwia usunięcie zasobu z serwera:
fetch("https://jsonplaceholder.typicode.com/posts/1", {
method: "DELETE",
})
.then((response) => console.log("Usunięto post:", response))
.catch((error) => console.error("Błąd:", error));
Obsługa Błędów w Fetch API ⚠️
Obsługa błędów jest kluczowa przy korzystaniu z Fetch API. Oto jak możemy obsłużyć błędne zapytanie:
fetch("https://jsonplaceholder.typicode.com/posts/10000")
.then((response) => {
if (!response.ok) {
throw new Error("Błąd: Nie udało się pobrać danych");
}
return response.json();
})
.then((data) => console.log(data))
.catch((error) => console.error("Błąd:", error));
Fetch API w Połączeniu z React i Node.js 🌍
Fetch API doskonale współpracuje z frameworkami takimi jak React czy Node.js. W React możemy użyć fetch() w połączeniu z useEffect, aby pobierać dane z API.
Przykład w React:
import React, { useState, useEffect } from "react";
function App() {
const [data, setData] = useState(null);
useEffect(() => {
fetch("https://jsonplaceholder.typicode.com/posts")
.then((response) => response.json())
.then((data) => setData(data))
.catch((error) => console.error("Błąd:", error));
}, []);
return (
<div>
{data
? data.map((post) => <p key={post.id}>{post.title}</p>)
: "Ładowanie..."}
</div>
);
}
export default App;
Wady i Zalety Fetch API 📊
Zalety:
- Prostota i czytelność kodu
- Obsługa promisów
- Uniwersalność
Wady:
- Brak wsparcia dla anulowania zapytań (można użyć
AbortController) - Fetch API nie rzuca błędów w przypadku odpowiedzi 404 lub
500
Podsumowanie 📋
Fetch API to super narzędzie, które znacząco upraszcza pracę z danymi i zapytaniami sieciowymi w JavaScript.
Dzięki możliwości korzystania z async/await, obsługa API staje się jeszcze prostsza.
Jeśli tworzysz nowoczesne aplikacje, Fetch API jest niezbędnym narzędziem w Twoim arsenale.
A jeśli zastanawiasz się, czy nauka programowania ma sens, zachęcam do przeczytania mojego artykułu na temat czy warto uczyć się programowania w 2023 roku.
