Als Alternative zu Ajax bietet sich die fetchAPI an mit einer interessanten Möglichkeit zur Fehlerbehandlung
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.
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.
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.
Im Gegensatz zum XHR-Objekt ist es mit der FetchAPI möglich, Custom-Request-Methods zu verwenden. Es gibt zwar eine Einschränkung, daß es mit Request-Methode GET oder HEAD keinen HTTP-Message-Body geben darf, da erfolgt eine entsprechende Fehlermeldung. Ansonsten jedoch kann die Requestmethode frei gewählt werden, wobei diese nur ASCII-Zeichen enthalten darf. Wird ein Message-Body gesendet, fügt FetchAPI spontan den Header Content-Length hinzu, diesbezüglich sind also keine eigenen Aktivitäten erforderlich.
Datenschutzerklärung: Diese Seite dient rein privaten Zwecken. Auf den für diese Domäne installierten Seiten werden grundsätzlich keine personenbezogenen Daten erhoben. Das Loggen der Zugriffe mit Ihrer Remote Adresse erfolgt beim Provider soweit das technisch erforderlich ist. sos@rolfrost.de.