JavaScript Fetch API zapewnia intuicyjny sposób wysyłania żądań z klienta aplikacji działającej w przeglądarce.
Jest łatwy w użyciu i wykorzystuje nowoczesną składnię JavaScript. Ten artykuł zawiera przewodnik dotyczący korzystania z interfejsu Fetch API.
Spis treści:
Co to jest API pobierania JavaScript?
JavaScript Fetch API to interfejs udostępniany przez nowoczesne przeglądarki do wysyłania żądań z interfejsu użytkownika. Stanowi alternatywę dla starszego żądania AJAX XMLHttpRequest.
Jest dostępny jako funkcja globalna o nazwie fetch. Funkcja ta wywołana z argumentami zwraca obietnicę, która staje się odpowiedzią. Dzięki funkcji pobierania możesz wykonywać wszelkiego rodzaju żądania HTTP.
Zalety Fetch API w porównaniu z innymi metodami
- Ma prostszy i bardziej intuicyjny interfejs, który jest łatwy do nauczenia się i obsługi. W rezultacie Twój kod staje się czystszy, gdy używasz Fetch API. XMLHttpRequest jest bardziej skomplikowany, a kod nie jest tak czysty, jak w przypadku korzystania z interfejsu API Fetch.
- Obsługuje obietnice, co umożliwia bardziej przejrzyste pisanie kodu asynchronicznego. XMLHttpRequest ich nie obsługuje; zamiast tego należy dodać wywołania zwrotne do procedur obsługi zdarzeń. W zależności od preferencji możesz preferować interfejs API JavaScript Fetch.
- Jest natywnie obsługiwany w przeglądarce. Oznacza to, że nie musisz dodawać dodatkowych bibliotek, aby wysyłać żądania. Dodatkowe biblioteki powiększą Twój pakiet JavaScript i spowolnią Twoją witrynę.
Korzystanie z interfejsu API pobierania
W tej sekcji opisano tworzenie różnych żądań przy użyciu interfejsu API JavaScript Fetch. Do napisania kodu możesz użyć dowolnego edytora, który wolisz. Pamiętaj tylko, aby uruchomić kod w przeglądarce. Uruchomię go wewnątrz znacznika skryptu w pliku HTML.
Proste żądanie GET
Najpierw nauczymy się tworzyć proste żądanie get. Kod umożliwiający wykonanie tej operacji ma następującą strukturę:
fetch(url)
Dlatego jeśli chcielibyśmy pobrać posty z Interfejs API symboli zastępczych JSONzrobiłbyś to w następujący sposób:
fetch('https://jsonplaceholder.typicode.com/posts');
Wywołanie funkcji zwróci obietnicę, rozwiązując odpowiedź API lub błąd, jeśli został napotkany. Dlatego, aby uzyskać dostęp do odpowiedzi, użyjemy słowa kluczowego Wait. Ale słowa kluczowego Wait możemy używać tylko w funkcji asynchronicznej.
Zatem owiniemy funkcję pobierania funkcją asynchroniczną i wywołamy ją. Jeśli nie jesteś obeznany z tym wszystkim, tutaj znajdziesz szczegółowy przewodnik po asynchronicznym JavaScript. Tak czy inaczej, kod:
async function getData() {
const response = await fetch('https://jsonplaceholder.typicode.com/posts');
console.log(response);
}
getData();
Jeśli uruchomisz powyższy kod, powinieneś otrzymać następujące dane wyjściowe.
Dane wyjściowe wskazują, że funkcja pobierania zwróciła obiekt odpowiedzi. Ten obiekt ma właściwości, które obejmują status, nagłówki i treść. Dane odpowiedzi są przechowywane w treści jako ciąg JSON. Dlatego musimy wyodrębnić ciąg i przeanalizować kod JSON, aby uzyskać dane jako obiekt JavaScript.
Na szczęście obiekt Response ma przydatną metodę o nazwie json(). Ta metoda odczytuje treść odpowiedzi i próbuje przeanalizować ciąg jako JSON. Zwraca obietnicę, która prowadzi do obiektu przeanalizowanego na podstawie JSON.
Jednak ta metoda zgłosi błąd, jeśli treść nie jest prawidłowym ciągiem JSON. Dlatego powinniśmy analizować kod JSON tylko wtedy, gdy odpowiedź ma kod stanu 200.
Zatem kod umożliwiający pobieranie postów będzie następujący:
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 wyniki:
To jest tablica zawierająca sto postów.
Niektóre punkty końcowe interfejsu API wymagają nagłówków. Nagłówki te można wykorzystać na przykład do autoryzacji. JavaScript Fetch API zapewnia łatwy sposób wysyłania nagłówków w ramach żądania. Aby określić nagłówki, musisz przekazać argument opcji do wywołania funkcji pobierania.
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ż interfejs API JSONPlaceholder nie wymaga nagłówka autoryzacyjnego, powyższy kod będzie działał jak poprzednio. Należy jednak wiedzieć, że istnieje możliwość przekazywania nagłówków.
Przekazywanie innych opcji
Oprócz przekazywania nagłówków możesz przekazać funkcji pobierania wiele innych opcji. Dwie opcje, które będziesz często przekazywać, to metoda żądania i opcje treści żądania.
Wyślemy żądanie POST do interfejsu API JSONPlaceholder, aby zademonstrować przekazanie ich obu. Oto kod, aby to zrobić:
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śliliśmy metodę żądania, której chcemy użyć, oraz treść jako właściwości. Dla obu właściwości podaliśmy argumenty w postaci łańcuchów. Jako metodę żądania udostępniliśmy ciąg „POST”, ponieważ chcemy wysłać żądanie POST. Udostępniliśmy także ciąg JSON dla właściwości body. Ten ciąg JSON jest tworzony przez naciągnięcie obiektu o wymaganych właściwościach.
Uruchomienie tego kodu w przeglądarce daje następujące dane wyjściowe:
Dane wyjściowe to obiekt zawierający identyfikator, który właśnie otrzymaliśmy z serwera. Tutaj jest świetne źródło aby wyświetlić pełną listę opcji, które możesz przekazać.
Błędy podczas korzystania z interfejsu API JavaScript Fetch
#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 zostaje odrzucona w przypadku napotkania błędu sieciowego. Dlatego musimy zawinąć nasz kod w blok try/catch. Aby sprawnie obsługiwać błędy sieciowe.
#2. Inne błędy
Oprócz błędów sieciowych możesz napotkać także inne błędy, takie jak 404, 403 i 500. Funkcja pobierania nie zgłasza błędu w przypadku napotkania takich błędów. Dlatego należy je sprawdzić, sprawdzając kod 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-a
Inne często spotykane błędy to błędy CORS. CORS oznacza udostępnianie zasobów między źródłami. Źródło to unikalna kombinacja protokołu, hosta i portu serwera. Na przykład moja witryna internetowa może działać na hoście lokalnym, hoście, na porcie 5500 i obsługiwana przez protokół HTTP. Dlatego początkiem tej witryny będzie http://localhost:5500.
Ta sama witryna internetowa wyśle żądanie API do interfejsu API https://jsonplaceholder.typicode.com, innego pochodzenia. Dlatego te dwa źródła, localhost i JSONPlaceholder, współdzielą zasoby. To jest dzielenie się zasobami między źródłami. Jednak serwer API musi umożliwić CORS, aby to działało. Nie zawsze tak jest. Rozwiązaniem obsługi takich błędów byłoby wysyłanie żądań za pośrednictwem serwera proxy obsługującego CORS.
Obsługa przeglądarki
Fetch API to dość nowoczesna funkcja. Według CanIUse.comokoło 95% użytkowników na całym świecie ma przeglądarki, które ją obsługują.
Wniosek
JavaScript Fetch API to składniowo lepszy i bardziej elegancki sposób pisania frontendów wysyłających żądania API. Biorąc pod uwagę ograniczoną obsługę przeglądarek, możesz rozważyć inne biblioteki klienta HTTP.