Comment les promesses peuvent-elles simplifier les requêtes XHR asynchrones en JavaScript ?

Comment les promesses permettent la programmation asynchrone avec XHR natif

Lorsque vous travaillez avec XHR dans une application frontale, il est souvent souhaitable d'utiliser des promesses pour une programmation asynchrone rationalisée. programmation. Cependant, la mise en œuvre du XHR promis sans un cadre volumineux peut s'avérer difficile.

Comprendre le XHR natif

Avant d'aborder la promesse, voyons comment effectuer une requête XHR de base à l'aide de rappels. :

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

Présentation des promesses avec XHR

Pour promettre le XHR natif, nous exploitons le constructeur Promise :

function makeRequest(method, url) {
  return new Promise(function(resolve, reject) {
    const 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();
  });
}

Maintenant, nous pouvons enchaîner et gérer de manière transparente les requêtes XHR asynchrones à l'aide de .then() et .catch ():

makeRequest('GET', 'http://example.com')
  .then(function(datums) {
    console.log(datums);
  })
  .catch(function(err) {
    console.error('Augh, there was an error!', err.statusText);
  });

Amélioré Fonctionnalité

Nous pouvons encore améliorer la fonction makeRequest en acceptant un objet d'options personnalisable :

function makeRequest(opts) {
  return new Promise(function(resolve, reject) {
    // ... (code remains similar to previous example) ...
  });
}

Cela nous permet de spécifier des paramètres tels que les données POST/PUT et les en-têtes personnalisés :

makeRequest({
  method: 'GET',
  url: 'http://example.com',
  params: {
    score: 9001
  },
  headers: {
    'X-Subliminal-Message': 'Upvote-this-answer'
  }
});

En conclusion, le prometteur XHR natif offre un moyen puissant pour simplifier et améliorer la programmation asynchrone dans vos applications frontend. L'utilisation du constructeur Promise avec des options personnalisables offre une approche flexible et efficace pour gérer les demandes XHR.

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!