JavaScript:
Wysyłanie żądania HTTP

Jak to zrobić:

Aby wysłać zapytanie HTTP w JavaScript, możemy użyć wbudowanego interfejsu fetch albo starszego XMLHttpRequest. Oto przykład użycia fetch:

// GET request używając fetch()
fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok ' + response.statusText);
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('There has been a problem with your fetch operation:', error));

// POST request używając fetch()
fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ key: 'value' }),
})
  .then(response => response.json())
  .then(data => console.log('Success:', data))
  .catch((error) => console.error('Error:', error));

Wynik:

Success: { ... odpowiedź serwera ... }
Error: ... informacje o błędzie ...

Deep Dive

Wczesne metody AJAX, jak XMLHttpRequest, były standardem przez lata, ale miały swoje wady - brak obietnic (promises), skomplikowany API. fetch pojawił się w języku JavaScript, by to ułatwić, oferuje prostszy sposób na asynchroniczne żądania HTTP i obsługuje obietnice.

Alternatywnie, w Node.js i niektórych aplikacjach klienckich możemy użyć biblioteki axios. Jest ona oparta na promises i często uważana za bardziej czytelną:

const axios = require('axios');

// Przykład z axios
axios.get('https://api.example.com/data')
  .then(response => console.log(response.data))
  .catch(error => console.log(error));

Warto wiedzieć, że każdy z tych sposobów radzi sobie z różnymi aspektami bezpieczeństwa, jak polityka CORS, różnią się także w obsłudze przerywania zapytań i streamingu.

Zobacz także

• Dokumentacja MDN dla fetch: MDN - Fetch
• Dokumentacja dla axios: Axios on GitHub
• Przewodnik po CORS: MDN - CORS