Comment la promesse encapsule-t-elle l'ajax ? Méthode de mise en œuvre de l'encapsulation des promesses ajax

Le contenu de cet article explique comment promise encapsule ajax ? La méthode d'implémentation de la promesse encapsulant ajax a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer, j'espère qu'elle vous sera utile.

Publiez d'abord le code

var ajaxOptions = {
    url: 'url',
    method: 'GET',
    async: true,
    data: null,
    dataType: 'text',
}

function ajax(protoOptions) {
    var options = {};

    for(var i in ajaxOptions){
        options[i] = protoOptions[i] || ajaxOptions[i];
    }
    

    return new Promise(function(resolve, reject){
        var xhr = new XMLHttpRequest();

        xhr.open(options.method, options.url, options.async);

        xhr.onreadystatechange = function() {
            if (this.readyState === 4 && this.status === 200) {
                resolve(this.responseText, this);
            } else {
                var resJson = {
                    code: this.status,
                    response: this.response
                }
                reject(resJson, this)
            }
        }

        xhr.send()

    })
}

Commentaires :

1, open(method, url, async)

Méthode : GET et POST ;

url : URL envoyée au serveur ;

async : asynchrone vrai, synchrone faux

2, onreadystatechange

Chaque fois que la valeur de readyState change, la fonction onreadystatechange exécute automatiquement

3, informations sur l'état de la réponse du serveur readyState

• 0 : La requête n'est pas initialisée

• 1 : La connexion au serveur a été établie

• 2 : La demande a été reçue

• 3 : La demande est en cours de traitement

• 4 : La demande a été complétée et la réponse est prête

Lorsque la valeur de readyState est 4 et le statut est 200, cela signifie que la réponse est prête et peut être exécutée. La méthode qui est appelée avec succès, sinon la méthode qui ne parvient pas à être appelée

.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!