Comment promettre des requêtes XHR natives à l'aide de JavaScript ?

Comment promettre XHR natif

Contexte

Dans le développement frontend moderne, les promesses sont devenues un outil essentiel pour gérer les opérations asynchrones. Bien que de nombreux frameworks fournissent des mécanismes intégrés de promesse, il est également possible d'obtenir cette fonctionnalité avec du code natif. Ce guide montre comment transformer les requêtes XHR natives (XMLHttpRequest) en promesses.

Étape 1 : Définir une fonction de requête avec des rappels

Commencez par créer une fonction de requête XHR de base qui utilise des rappels :

function makeRequest(method, url, done) {
  var xhr = new XMLHttpRequest();
  xhr.open(method, url);
  xhr.onload = function () {
    done(null, xhr.response);
  };
  xhr.onerror = function () {
    done(xhr.response);
  };
  xhr.send();
}

Étape 2 : Introduire la construction de promesses

Pour transformer cette fonction dans une version promise, exploitez le constructeur de promesse :

function makeRequest(method, url) {
  return new Promise(function (resolve, reject) {
    var xhr = new XMLHttpRequest();
    xhr.open(method, url);
    xhr.onload = function () {
      if (xhr.status >= 200 && xhr.status < 300) {
        resolve(xhr.response);
      } else {
        reject({
          status: xhr.status,
          statusText: xhr.statusText
        });
      }
    };
    xhr.onerror = function () {
      reject({
        status: xhr.status,
        statusText: xhr.statusText
      });
    };
    xhr.send();
  });
}

Étape 3 : Améliorez avec les paramètres et les options

Pour améliorer la flexibilité de la fonction de requête, introduisez des paramètres pour la méthode, l'URL , et un objet options optionnel :

function makeRequest(opts) {
  return new Promise(function (resolve, reject) {
    var xhr = new XMLHttpRequest();
    xhr.open(opts.method, opts.url);
    xhr.onload = function () {
      if (xhr.status >= 200 && xhr.status < 300) {
        resolve(xhr.response);
      } else {
        reject({
          status: xhr.status,
          statusText: xhr.statusText
        });
      }
    };
    xhr.onerror = function () {
      reject({
        status: xhr.status,
        statusText: xhr.statusText
      });
    };
    if (opts.headers) {
      Object.keys(opts.headers).forEach(function (key) {
        xhr.setRequestHeader(key, opts.headers[key]);
      });
    }
    var params = opts.params;
    if (params && typeof params === 'object') {
      params = Object.keys(params).map(function (key) {
        return encodeURIComponent(key) + '=' + encodeURIComponent(params[key]);
      }).join('&');
    }
    xhr.send(params);
  });
}

Usage

Avec la fonction makeRequest promise, Les XHR peuvent être exécutés de manière transparente en tant qu'opérations asynchrones :

makeRequest({
  method: 'GET',
  url: 'http://example.com'
})
.then(function (datums) {
  return makeRequest({
    method: 'POST',
    url: datums.url,
    params: {
      score: 9001
    },
    headers: {
      'X-Subliminal-Message': 'Upvote-this-answer'
    }
  });
})
.catch(function (err) {
  console.error('Augh, there was an error!', err.statusText);
});

Approche alternative

Une alternative à la promesse consiste à utiliser l'API fetch, qui fournit une prise en charge intégrée des promesses. Cependant, gardez à l'esprit que la récupération peut ne pas être prise en charge dans tous les navigateurs et peut nécessiter un polyfill.

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!