fetch()
Wysyła zapytanie HTTP i zwraca obietnicę z odpowiedzią serwera (obiektem Response).
- Zwraca
- Obietnicę spełnioną obiektem
Response.
Przykład
#const response = await fetch('data:application/json,{"name":"Ania","level":7}')
console.log(response.ok, response.status)
const user = await response.json()
console.log(`${user.name} ma poziom ${user.level}`)Adres data: zawiera odpowiedź wprost w adresie, więc działa bez połączenia z serwerem. W prawdziwej aplikacji w tym miejscu jest adres API, np. "/api/users/7".
Definicja i zastosowanie
#Funkcja fetch() pobiera dane z sieci. Przyjmuje adres zasobu i opcjonalny obiekt ustawień, a zwraca obietnicę, która spełnia się obiektem Response, gdy tylko dotrą nagłówki odpowiedzi. Treść odczytujesz osobno, metodami takimi jak response.json() czy response.text(), które również zwracają obietnice.
Ważna pułapka: fetch() odrzuca obietnicę tylko przy błędzie sieci, na przykład przy braku połączenia albo zablokowanym zapytaniu. Odpowiedzi z kodem 404 czy 500 są dla niego sukcesem. Dlatego zawsze sprawdzaj response.ok (ma wartość true dla kodów od 200 do 299) albo response.status.
Drugi argument pozwala zmienić metodę (POST, PUT, DELETE), dodać nagłówki i wysłać treść w polu body, zwykle jako JSON przygotowany przez JSON.stringify(). Opcja signal pozwala przerwać zapytanie, na przykład po przekroczeniu limitu czasu.
Przykłady na tej stronie nie mają dostępu do sieci, dlatego pierwszy z nich pobiera adres data:, w którym dane są zapisane wprost. Z prawdziwym API kod wygląda tak samo, zmienia się tylko adres.
Składnia
#fetch(resource)
fetch(resource, options)Parametry
#resource
napis, URL lub Request
Adres zasobu, np."/api/courses"albo pełny adres URL.options
opcjonalny obiekt
Ustawienia zapytania, m.in.method,headers,body,signalicredentials.
Więcej przykładów
#async function loadCourses() {
const response = await fetch('/api/courses')
if (!response.ok) {
throw new Error(`Błąd HTTP: ${response.status}`)
}
return response.json()
}
try {
const courses = await loadCourses()
console.log(courses.length)
} catch (error) {
console.log(error.message)
}Błąd HTTP: 404
Przykład wymaga prawdziwego serwera, więc nie uruchamia się w podglądzie. Wynik pokazuje sytuację, w której serwer odpowiedział kodem 404.
const response = await fetch('/api/progress', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ lessonId: 12, score: 95 })
})
const result = await response.json()
console.log(result){ saved: true, points: 150 }Przykład wymaga prawdziwego serwera, więc nie uruchamia się w podglądzie. Wynik to przykładowa odpowiedź API.
try {
const response = await fetch('/api/ranking', { signal: AbortSignal.timeout(3000) })
console.log(response.status)
} catch (error) {
console.log(error.name)
}TimeoutError
Wynik pokazuje sytuację, w której serwer nie odpowiedział w ciągu 3 sekund. Zapytanie zostaje wtedy przerwane, a fetch() odrzuca obietnicę.
Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Zawsze sprawdzaj
response.ok. Kody 404 i 500 nie odrzucają obietnicy zwróconej przezfetch(). - Wysyłając JSON, ustaw nagłówek
Content-Type: application/jsoni zamień dane na tekst przezJSON.stringify(). - Treść odpowiedzi można odczytać tylko raz. Drugie wywołanie
response.json()na tej samej odpowiedzi zakończy się błędem.
Powiązane hasła
#- async functionDeklaruje funkcję asynchroniczną, która zawsze zwraca obietnicę i może używać w środku słowa await.
- awaitWstrzymuje funkcję async do czasu rozstrzygnięcia obietnicy i zwraca jej wartość albo rzuca jej błąd.
- Promise.prototype.then()Rejestruje funkcję wywoływaną po spełnieniu obietnicy i zwraca nową obietnicę, co pozwala łączyć kroki w łańcuch.
- JSON.parse()Zamienia napis w formacie JSON na wartość JavaScript, np. obiekt lub tablicę.
- JSON.stringify()Zamienia wartość JavaScript, np. obiekt lub tablicę, na napis w formacie JSON.
- try...catchPrzechwytuje błędy rzucone w bloku try i obsługuje je w catch. Opcjonalny finally wykona się zawsze.
Widzisz błąd albo brakuje przykładu? Napisz do nas.