Formular per Ajax versenden

[1unitedpower]

Meine Frage hat nur indirekt mit der fetch-API zu tun. Aber ich bleib dennoch im Thread. Ich habe das nun wie folgt umgesetzt und das funktioniert soweit auch. Aber unabhängig davon, dass ich das nicht sehr elegant finde, krieg ich Mecker von eslint wegen der unnamed function in der Methode handleResponse. Kann mir jemand verraten, wie ich mich "besser ausdrücken" kann?

Die quick-and-dirty-Lösung wären Fat-Arrow-Functions zu verwenden wo this nicht dynamisch sein soll. Statt function(){}.bind(this) also () => {} zu benutzen.

Also hieraus:

response.json().then(
    function(json) {
        this.response = json;
        this.showMessage();
    }.bind(this)
);

könntest du das hier machen:

response.json().then(json => {
    this.response = json;
    this.showMessage();
});

Schöner wäre es, den Kontrollfluss mit Promises zu entwirren und allen Handler-Funktionen aussagekräftige Namen zu geben. Folgenden Code hab ich mangels Zeit nicht getestet, aber er sollte die Funktionsweise verdeutlichen, Fehler kann ich gerade nicht ganz ausschließen:

function submitAndHandleResponse(form) {
    return submit(form)
        .then(handleHttpResponse)
        .then(handleHttpSuccess)
        .then(handleJsonSuccess);
}
function submit(form) {
    const { action, method } = form.cloneNode(false);
    const body = new FormData(form);
    return fetch(action, { method, body });
}
function handleHttpResponse(response) {
    return response.ok
        ? Promise.resolve(response);
        : Promise.reject(response);
}
function handleHttpSuccess(response) {
    return response.json();
}
function handleJsonSuccess(json) {
    console.dir(json);
    return Promise.resolve(json);
}

In der Praxis wird das noch etwas komplexer, weil du zu jedem Promise auch noch einen Error-Handler haben möchtest.