Comment obtenir XMLHttpRequest responseText en utilisant .bind en Javascript?

Question

Voilà ce que je voudrais faire:

response: string; 
sendCreateInvoice(invoice, job){ 
    let url = 'assets/php/myScript.php'; 
    var xmlhttp = new XMLHttpRequest(); 
    xmlhttp.onreadystatechange = function() { 
    if (this.readyState == 4 && this.status == 200) { 
     this.response = this.responseText; 
    }; 
    }; 
    xmlhttp.open('POST', url, true); 
    xmlhttp.send(invoice); 
} 

donc je pense que je dois utiliser .bind(this) mais quand je fais ce que je ne peux pas sembler accéder this.responseText plus. J'ai essayé comme ceci:

response: string; 
sendCreateInvoice(invoice, job){ 
    let url = 'assets/php/myScript.php'; 
    var xmlhttp = new XMLHttpRequest(); 
    xmlhttp.onreadystatechange = function() { 
    if (this.readyState == 4 && this.status == 200) { 
     this.response = this.responseText; 
    }; 
    }.bind(this); 
    xmlhttp.open('POST', url, true); 
    xmlhttp.send(invoice); 
} 

Et j'ai essayé this.xmlhttp.responseText et xmlhttp.responseText mais pas de chance. Où vais-je mal? Comment puis-je sauvegarder le responseText en response?

==================

Code de travail:

response: string; 
sendCreateInvoice(){ 
    let url = 'assets/php/myScript.php'; 
    var xmlhttp = new XMLHttpRequest(); 
    xmlhttp.onreadystatechange =() => { 
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
     this.response = xmlhttp..responseText; 
    }; 
    }; 
    xmlhttp.open('POST', url, true); 
    xmlhttp.send(invoice); 
} 

Answer 1

Vous pouvez utiliser xmlhttp pour faire référence à l'objet XMLHttpRequest.

Et les appels à open() et send() doivent être en dehors de la fonction de rappel.

xmlhttp.onreadystatechange = function() { 
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
     this.response = xmlhttp.responseText; 
    }; 
    }.bind(this); 

En outre, au lieu de .bind(this), vous pouvez utiliser une fonction de flèche.

xmlhttp.onreadystatechange =() => { 
    if (this.readyState == 4 && this.status == 200) { 
     this.response = xmlhttp.responseText; 
    }; 
    }; 
    xmlhttp.open('POST', url, true); 
    xmlhttp.send(invoice); 

fonctions Arrow traitent this comme une variable lexicale normale.

Answer 2

Ne pas utiliser bind stocker seulement la valeur de this dans une variable en dehors de la fonction, car vous utilisez this comme demande dans la fonction! Comme ceci:

response: string; 
sendCreateInvoice(invoice, job){ 
    var that = this; // <<<< store it here 

    let url = 'assets/php/myScript.php'; 
    var xmlhttp = new XMLHttpRequest(); 
    xmlhttp.onreadystatechange = function() { 
    if (this.readyState == 4 && this.status == 200) { 
     that.response = this.responseText; 
    // ^^^^ use it here 
    }; 
    }; 

    // these two lines should be outside of the callback of the event listener 
    xmlhttp.open('POST', url, true); 
    xmlhttp.send(invoice); 
}