JavaScript Fetch ja XHR

Fetch ja XHR ovat kaksi tapaa lähettää verkkopyyntöjä JavaScriptissä. Fetch on uudempi API, joka on tullut käyttöön vuodesta 2015 lähtien ja se tarjoaa modernimman ja yksinkertaisemman tavan lähettää verkkopyyntöjä. XHR (XMLHttpRequest) on vanhempi tapa lähettää verkkopyyntöjä ja se on ollut käytössä jo vuodesta 2005.

Fetch

Fetch käyttää Promise-rajapintaa, joka mahdollistaa asynkronisten operaatioiden hallinnan helposti. Fetchin käyttö on yksinkertaista, sillä se sisältää vain yhden funktion, joka palauttaa Promise-olion. Tämän funktion avulla voidaan lähettää verkkopyyntöjä ja käsitellä vastauksia. Esimerkiksi:

fetch('https://jsonplaceholder.typicode.com/posts')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

XHR

XHR puolestaan käyttää callback-funktioita, jotka ovat hieman monimutkaisempia käyttää. XHR-olio luodaan ensin, sen jälkeen asetetaan halutut parametrit ja lähetetään verkkopyyntö. Kun vastaus saadaan, se käsitellään callback-funktiolla. Esimerkiksi:

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts');
xhr.onload = function() {
  if (xhr.status === 200) {
    console.log(JSON.parse(xhr.responseText));
  } else {
    console.error('Virhe:', xhr.statusText);
  }
};
xhr.onerror = function() {
  console.error('Pyynnön lähettämisessä tapahtui virhe.');
};
xhr.send();

Tai jos halutaan lähettää POST pyyntö:

const xhr = new XMLHttpRequest();
const url = 'https://jsonplaceholder.typicode.com/posts';
const data = JSON.stringify({ title: 'Otsikko', body: 'Sisältö' });

xhr.open('POST', url);
xhr.setRequestHeader('Content-Type', 'application/json');

xhr.onload = function() {
  if (xhr.status === 201) {
    console.log(xhr.responseText);
  } else {
    console.error('Virhe:', xhr.statusText);
  }
};

xhr.onerror = function() {
  console.error('Pyynnön lähettämisessä tapahtui virhe.');
};

xhr.send(data);

Yllä olevassa esimerkissä luodaan XHR-olio, asetetaan parametrit, kuten pyynnön URL ja lähetettävä data. Sen jälkeen pyyntö lähetetään käyttäen send()-funktiota, ja vastauksen käsittely tapahtuu callback-funktioiden onload ja onerror avulla.

Kumpaa käyttää?

Jos käytössä on moderni selain, joka tukee Fetch API:a, kannattaa ehdottomasti käyttää sitä sen yksinkertaisuuden ja tehokkuuden vuoksi. XHR puolestaan on hyödyllinen vanhemmissa selaimissa ja monimutkaisempien verkkopyyntöjen käsittelyssä.

Harjoittele