Wie kann ich native XHR-Anfragen mithilfe von Versprechen vereinfachen?

Native XHR versprechen: Ein vereinfachter Ansatz

In Frontend-Anwendungen bieten native Versprechen eine bequeme Möglichkeit, asynchrone Vorgänge abzuwickeln. Allerdings kann die Einbindung in native XHR-Anfragen eine Herausforderung darstellen, ohne auf komplexe Frameworks angewiesen zu sein. Ziel dieses Artikels ist es, diese Lücke zu schließen, indem er eine vereinfachte Anleitung zur Bereitstellung nativer typischer Callback-basierter Ansatz. Hier ist ein Beispiel für eine einfache XHR-Anfrage unter Verwendung von Rückrufen:

Dieser Ansatz eignet sich gut für einfache Szenarien, es mangelt ihm jedoch an der Flexibilität und Zusammensetzbarkeit, die Versprechen bieten.

Promisification using der Promise-Konstruktor

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

Um XHR-Anfragen zu versprechen, können wir den Promise-Konstruktor nutzen. Dieser Konstruktor akzeptiert eine Funktion mit zwei Argumenten, „resolve“ und „reject“, die als Rückrufe für Erfolg bzw. Misserfolg betrachtet werden können.

Aktualisieren wir makeXHRRequest, um den Promise-Konstruktor zu verwenden:

Dieser Code initialisiert ein neues Promise, öffnet eine XHR-Anfrage und behandelt sowohl Erfolg als auch Fehler Szenarien.

Verkettung und Fehlerbehandlung

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

Promises bieten eine leistungsstarke Möglichkeit, mehrere XHR-Anfragen zu verketten und Fehler effektiv zu behandeln. Hier ist ein Beispiel für die Verkettung von Anfragen und die Behandlung von Fehlern:

In diesem Code stellen wir zunächst eine GET-Anfrage an „example.com“ und dann, basierend auf der Antwort, eine weitere GET-Anfrage an ein anderer Endpunkt (in der Antwort angegeben). Alle bei einer Anfrage auftretenden Fehler werden von der Catch-Klausel behandelt.

Benutzerdefinierte Parameter und Header

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

Um unser XHR-Versprechen vielseitiger zu gestalten, können wir die Parameter und anpassen Kopfzeilen. Wir führen ein opts-Objekt mit der folgenden Signatur ein:

Hier ist eine modifizierte Version von makeRequest, die benutzerdefinierte Parameter und Header ermöglicht:

Diese Version bietet mehr Flexibilität in Erstellen von XHR-Anfragen, sodass Sie benutzerdefinierte Parameter und Header angeben können.

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

Zusammenfassend lässt sich sagen, dass das Versprechen von XHR-Anfragen mithilfe nativer Versprechen ein unkomplizierter Ansatz ist, der Verbesserungen bringt die Flexibilität und Zusammensetzbarkeit Ihres Frontend-Codes. Damit können Sie ganz einfach asynchrone XHR-Anfragen stellen, diese verketten und Fehler effektiv behandeln. Durch die Nutzung der in diesem Artikel besprochenen Konzepte können Sie das Potenzial nativer Versprechen für die Entwicklung Ihrer Frontend-Anwendungen erschließen.

Das obige ist der detaillierte Inhalt vonWie kann ich native XHR-Anfragen mithilfe von Versprechen vereinfachen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!