Die Fetch API, eine einfache Schnittstelle zu Webressourcen

Als Alternative zu Ajax bietet sich die fetchAPI an mit einer interessanten Möglichkeit zur Fehlerbehandlung

Daten abholen oder senden:

Anmerkungen

Gegenüber dem asynchronen Request mit einem XMLHttpRequest()-Objekt (XHR) ergeben sich gerade hinsichtlich der Fehlerbehandlung bezüglich unterschiedlicher Response-Content-Types interessante Möglichkeiten. Während beim herkömmlichen AJAX-Request dem XHR-Objekt bereits vor dem Request mitgeteilt werden muss, ob eine Response als Blob, ArrayBuffer oder Text verarbeitet werden soll, ist das nun über die fetchAPI auch im Nachhinein möglich.

Im Beispiel soll die Binary einer Grafik gefetcht werden, womit in der callback()-Funktion zur Response und Erstellung eines URL-Objekts ein Blob erforderlich ist. Tritt jedoch beim Lesen der Grafik auf dem Server ein Fehler auf, wird in der Response, welche hierzu mit dem HTTP Status 502 gesendet wird, nur der Fehlertext benötigt. Clientseitig wird das also nur anhand des HTTP Status unterschieden der in response.status (Response-Objekt) zu finden ist. Alles zusammen sieht dann bspw. so aus:

 if( response.status == 200 )
    response.blob().then( blob_callback );
 else
    response.text().then( function(text){
        $(out).text(text)
    });

Die entsprechende Callbackfunktion wird in beiden Fällen über ein promise aufgerufen welches je nach HTTP-Status entweder von response.blob() oder von response.text() zurückgegeben wird.

POST

Auch dafür läßt sich FetchAPI verwenden, untenstehend der JS-Code zur DEMO:

function post(){
    var myHeaders = new Headers();
    myHeaders.append("Content-Type", "application/body+query");

    fetch("/fetch.html?post=1", {
        headers: myHeaders,
        method: "POST",
        body: 'asdf für 1 €'
    }).then(function response(response){
        response.text().then( function (msg){
            var out = document.querySelector('output');
            $(out).text(msg);
        } );
    });
}

Der Inhalt für den Request-Body ist hierzu als Text asdf für 1 € fest kodiert und wird per Request-Method POST zum Server übertragen. Von dort aus wird zur DEMO dieser Inhalt einfach wieder als Response zurückgeschickt.

File Upload

Solange Request Method POST unterstützt wird und es eine FileAPI gibt, ist auch das Hochladen von Dateien möglich. Der für den Request bestimmte HTTP Message-Body kann beliebige Daten bzw. Bytesequenzen enthalten wie z.B. Blob, ArrayBuffer oder ein FormData Objekt.


Anbieter: nmq​rstx-18­@yahoo.de, die Seite verwendet funktionsbedingt einen Session-Cookie und ist Bestandteil meines nach modernen Aspekten in Perl entwickelten Frameworks.