Maison >interface Web >js tutoriel >Comment promettre des requêtes XHR natives à l'aide de JavaScript ?

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

DDD
DDDoriginal
2024-12-06 06:31:121005parcourir

How to Promisify Native XHR Requests Using 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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn