Comment transformer un appel XHR natif en promesse ?

Comment puis-je convertir un XHR natif en promesse ?

Dans le développement frontend, la transition vers une approche basée sur les promesses peut améliorer l'organisation du code et simplifier la gestion des erreurs. Cet article décrit une procédure étape par étape pour convertir un XHR natif en promesse, sans avoir besoin de frameworks lourds.

Contexte

Initialement, notre XHR la fonction utilisera des rappels pour le succès et la gestion des erreurs. Nous pouvons ensuite utiliser le constructeur Promise pour envelopper cette fonctionnalité, en créant une nouvelle fonction appelée makeRequest qui renvoie une promesse.

function makeRequest(method, url, done) {
  // Callback-based XHR
}

function makeRequest(method, url) {
  // Promise-based XHR
  return new Promise((resolve, reject) => {
    // Implement XHR logic here
    // Resolve on success, reject on error
  });
}

Ajout de paramètres

Nous pouvons étendre makeRequest pour accepter un objet d'options, nous permettant de spécifier la méthode, l'URL, les paramètres et les en-têtes personnalisés. Cela rend la fonction plus polyvalente et plus facile à utiliser.

function makeRequest(opts) {
  return new Promise((resolve, reject) => {
    // Implement XHR logic using opts
    // Resolve on success, reject on error
  });
}

// Example usage
makeRequest({
  method: 'GET',
  url: 'http://example.com'
});

Affinage de la gestion des erreurs

La dernière étape consiste à améliorer la gestion des erreurs en fournissant des informations plus descriptives dans le le rejet de la promesse. Cela améliorera le débogage et la convivialité.

function makeRequest(opts) {
  return new Promise((resolve, reject) => {
    // More descriptive error handling
    reject({
      status: xhr.status,
      statusText: xhr.statusText
      // Custom error message, if desired
    });
  });
}

En suivant ces étapes, vous pouvez facilement convertir un XHR natif en promesse, bénéficiant ainsi des avantages du code basé sur les promesses sans avoir besoin de frameworks complexes. De plus, la gestion améliorée des erreurs fournit une réponse plus complète et informative, simplifiant le débogage et améliorant l'expérience utilisateur.

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!