Comment puis-je simplifier les requêtes XHR natives à l'aide de promesses ?

XHR natif prometteur : une approche simplifiée

Dans les applications frontales, les promesses natives offrent un moyen pratique de gérer les opérations asynchrones. Cependant, les intégrer dans des requêtes XHR natives peut s’avérer difficile sans recourir à des frameworks complexes. Cet article vise à combler cette lacune en fournissant un guide simplifié sur la promesse de requêtes XHR natives.

Comprendre le problème

Avant de prometter des requêtes XHR natives, il est essentiel de comprendre le approche typique basée sur le rappel. Voici un exemple de requête XHR de base utilisant des rappels :

function makeXHRRequest(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();
}

Cette approche fonctionne bien pour des scénarios simples, mais elle manque de la flexibilité et de la composabilité offertes par les promesses.

Promisification utilisant le constructeur Promise

Pour promettre les requêtes XHR, nous pouvons exploiter le constructeur Promise. Ce constructeur prend une fonction avec deux arguments, résoudre et rejeter, qui peuvent être considérés respectivement comme des rappels en cas de succès et d'échec.

Mettons à jour makeXHRRequest pour utiliser le constructeur Promise :

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();
  });
}

Ce code initialise une nouvelle promesse, ouvre une requête XHR et gère à la fois le succès et les erreurs scénarios.

Chaînage et gestion des erreurs

Les promesses fournissent un moyen puissant d'enchaîner plusieurs requêtes XHR et de gérer efficacement les erreurs. Voici un exemple de chaînage de requêtes et de gestion des erreurs :

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

Dans ce code, nous effectuons d'abord une requête GET à « example.com », puis, en fonction de la réponse, effectuons une autre requête GET à un point final différent (spécifié dans la réponse). Toutes les erreurs rencontrées lors de l'une ou l'autre requête seront traitées par la clause catch.

Paramètres et en-têtes personnalisés

Pour rendre notre promesse XHR plus polyvalente, nous pouvons personnaliser les paramètres et en-têtes. Nous allons introduire un objet opts avec la signature suivante :

{
  method: String,
  url: String,
  params: String | Object,
  headers: Object,
}

Voici une version modifiée de makeRequest qui permet des paramètres et des en-têtes personnalisés :

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);
  });
}

Cette version offre plus de flexibilité dans faire des requêtes XHR, vous permettant de spécifier des paramètres et des en-têtes personnalisés.

En conclusion, promettre des requêtes XHR à l'aide de promesses natives est une approche simple qui améliore la flexibilité et composabilité de votre code frontend. Il vous permet d'effectuer facilement des requêtes XHR asynchrones, de les enchaîner et de gérer efficacement les erreurs. En tirant parti des concepts abordés dans cet article, vous pouvez libérer le potentiel des promesses natives pour le développement de votre application frontend.

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!