Co przyjmuje metoda fetch?

Metoda fetch przyjmuje jeden obowiązkowy argument — ścieżkę do żądania (RequestInfo lub URL) — oraz jeden opcjonalny argument — obiekt ustawień (RequestInit).

Obowiązkowy argument (input) :

• String: URL zasobu.
• Obiekt Request: Instancja klasy Request, która zapewnia bardziej elastyczną konfigurację żądania (nagłówki, metoda itp.).

Opcjonalny argument (init) : Obiekt z polami opisującymi konfigurację żądania. Niektóre często używane pola:

• method: Metoda HTTP żądania (GET, POST, PUT, DELETE, OPTIONS itp.).
• headers: Nagłówki żądania. Może być obiektem klucz-wartość lub instancją klasy Headers.
• body: Ciało żądania (dla metod innych niż GET lub HEAD). Może być ciągiem znaków, ArrayBuffer, TypedArray, DataView, Blob, FormData, URLSearchParams lub ReadableStream.
• mode: Tryb żądania (cors, no-cors, same-origin, navigate).
• credentials: Konfiguracja wysyłania danych uwierzytelniających (omit, same-origin, include).
• cache: Konfiguracja pamięci podręcznej (default, no-store, reload, no-cache, force-cache, only-if-cached).
• redirect: Jak obsługiwać przekierowania (follow, error, manual).
• referrer: Wartość dla nagłówka Referer.
• referrerPolicy: Polityka przesyłania nagłówka Referer.
• integrity: Wartość dla nagłówka Integrity. Używane do integralności podzasobów.
• keepalive: Wartość boolean wskazująca, czy żądanie powinno pozostać aktywne po zamknięciu strony (np. do wysyłania analiz lub raportów).
• signal: Instancja AbortSignal do anulowania żądania.
• window: Obiekt Window powiązany z żądaniem (domyślnie bieżące okno).

Przykład użycia:

// Żądanie GET
fetch('/api/users')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Błąd:', error));

// Żądanie POST z ciałem i nagłówkami
fetch('/api/products', {
  method: 'POST', // Metoda HTTP
  headers: {
    'Content-Type': 'application/json', // Typ wysyłanych danych
    'Authorization': 'Bearer your_token' // Przykład nagłówka autoryzacji
  },
  body: JSON.stringify({ name: 'Nowy produkt', price: 100 }) // Ciało żądania
})
  .then(response => {
    if (!response.ok) {
      throw new Error(`Błąd HTTP! status: ${response.status}`);
    }
    return response.json();
  })
  .then(data => console.log('Sukces:', data))
  .catch(error => console.error('Błąd:', error));