Fetch API – XMLHttpRequest in schön

Moderne Web-Applikationen und -seiten ohne Ajax kann man sich heute nicht mehr vorstellen. Single-Page-Applikationen auf Basis von AngularJS oder ReactJS wären gar nicht möglich. Der Begriff „Ajax“ tauchte erstmalig im Jahr 2005 im Rahmen eines Blogposts auf: Ajax: A New Approach to Web Applications. Hier geht’s zum archivierten Artikel bei webarchive.org.

Der Autor Jesse James Garrett nutzte „Ajax“ für die Abkürzung von Asynchronous JavaScript and XML. Die Idee und Technologie dahinter waren dabei nicht neu, sondern bereits einige Jahre bekannt: XMLHttpRequest, kurz XHR. XHR wurde Ende der 1990er Jahre von Microsoft entwickelt, um Seiten-Reloads in der Weblösung von Outlook zu minimieren, indem man Daten asynchron und dynamisch nachladen kann.

Ein wohlgehütetes Geheimnis und ein wichtiger Grund für den Erfolg von jQuery ist die offizielle API von XMLHttpRequest:

if (window.XMLHttpRequest) { // Für Chrome, Firefox, Safari, Edge ...
  request = new XMLHttpRequest();
} else if (window.ActiveXObject) { // Für alte Internet Explorer
  try {
    request = new ActiveXObject('Msxml2.XMLHTTP');
  } 
  catch (e) {
    try {
      request = new ActiveXObject('Microsoft.XMLHTTP');
    } 
    catch (e) {}
  }
}

request.open('GET', 'https://www.maibornwolff.de/awesome/endpoint', true);
request.send(null);

Für Nutzer von jQuery sieht das sehr viel einfacher aus, da der obere Code von jQuery gekapselt wird:

$.get('https://www.maibornwolff.de/awesome/endpoint');

Weit aus schöner funktioniert das mit der neuen Fetch API der Web Hypertext Application Technology Working Group (WHATWG). Sie steht bereits in den aktuellen Versionen von Chrome und Firefox zur Verfügung. Die Fetch API ist dabei nicht nur für HTTP Requests und Responses oder XMLHttpRequests angedacht, sondern auch für neue Technologien wie Service Worker. Mehr über Service Worker im Artikel von Sebastian Springer in iX 06/2016.

Ein weiteres Schmankerl ist, dass ein Promise-Objekt zurückgegeben wird und der Code somit sehr gut lesbar wird.

fetch('https://www.maibornwolff.de/awesome/endpoint')
  .then(function(response) {
    return response.json();
  })
  .then(function(data) {
    console.log(data);
  })
  .catch(function(error) {
    console.error(error);
  });

Die Fetch API lässt sich aber natürlich auch für POST verwenden. Auch hier ist die Benutzung denkbar einfach:

fetch('https://www.maibornwolff.de/awesome/endpoint',
  {
    method: 'post',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      title: 'Fetch API - XMLHttpRequest in schön',
      url: 'https://www.maibornwolff.de/blog/techblog',
    })
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.error(error);
  });

Wie man sieht: Die Fetch API viel einfacherer als die direkte Nutzung von XMLHttpRequest. Leider unterstützen sie derzeit nur Chrome und Firefox, der Support für Microsoft Edge und Safari ist in Arbeit. Das soll natürlich niemanden davon abhalten, diese API schon heute zu verwenden: Github bietet ein Polyfill für die fetch()-Funktion unter https://github.com/github/fetch an. Dort findet man auch andere Anwendungsbeispiele wie Dateiupload, Fehlerbehandlung und Cookies.

---

Über den Autor

Thorsten ist seit Mitte der 1990er Jahre im Web unterwegs und arbeitet seit 2015 bei MaibornWolff. Er entwirft und entwickelt am liebsten hoch-performante und skalierbare Web Plattformen für die Cloud sowie auch gerne für IoT Devices. In seiner Freizeit ist er am liebsten mit seiner Familie unterwegs und entwickelt gerne Open Source Software. 

Twitter: @ThorstenRinne