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?
import BaseModule from '../../../../javascripts/helpers/baseModule';
export default class Commentsform extends BaseModule {
constructor(element) {
super(element, element.getAttribute('data-js-module'));
this.getElements([
{ id: 'messageSubmit', selector: 'messageSubmit' }
]);
this.bindEvents();
}
bindEvents() {
this.elements.messageSubmit.addEventListener('click', this.submitForm.bind(this));
}
submitForm(event) {
event.preventDefault();
const { action, method } = this.elements.commentForm.cloneNode(false);
const body = new FormData(this.elements.commentForm);
const headers = {
'Content-type': 'application/x-www-form-urlencoded; charset=UTF-8'
};
fetch(action, { method, headers, body }).then(this.handleResponse.bind(this));
}
handleResponse(response) {
if (response.status === 200) {
response.json().then(
function(json) {
this.response = json;
this.showMessage();
}.bind(this)
);
} else {
this.response = {
state: 'error',
message: 'networkerror'
};
this.showMessage();
}
}
showMessage() {
console.log('showMessage()');
console.log(this.response);
}
}
danke und
gruss, heinetz