Wie können Versprechen asynchrone XHR-Anfragen in JavaScript vereinfachen?

Wie Promises asynchrone Programmierung mit nativem XHR ermöglichen

Bei der Arbeit mit Programmierung. Die Implementierung von versprochenem XHR ohne ein umfangreiches Framework kann sich jedoch als Herausforderung erweisen.

Natives :

Einführung von Versprechen mit XHR

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

Um das native XHR zu versprechen, nutzen wir den Promise-Konstruktor:

Jetzt können wir asynchrone XHR-Anfragen mit .then() und .catch nahtlos verketten und verarbeiten ():

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

Erweitert Funktionalität

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

Wir können die makeRequest-Funktion weiter verbessern, indem wir ein anpassbares Optionsobjekt akzeptieren:

Dadurch können wir Parameter wie POST/PUT-Daten und benutzerdefinierte Header angeben:

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

Zusammenfassend lässt sich sagen, dass die Bereitstellung von nativem XHR ein leistungsstarkes Mittel zur Vereinfachung und Verbesserung der asynchronen Programmierung in Ihren Frontend-Anwendungen bietet. Die Verwendung des Promise-Konstruktors zusammen mit anpassbaren Optionen bietet einen flexiblen und effizienten Ansatz für die Bearbeitung von XHR-Anfragen.

Das obige ist der detaillierte Inhalt vonWie können Versprechen asynchrone XHR-Anfragen in JavaScript vereinfachen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!