Wie kann ich native XHR-Anfragen mithilfe von JavaScript versprechen?

Wie man natives Während viele Frameworks integrierte Mechanismen zur Versprechensbereitstellung bieten, ist es möglich, diese Funktionalität auch mit nativem Code zu erreichen. In dieser Anleitung wird gezeigt, wie Sie native XHR-Anfragen (XMLHttpRequest) in Versprechen umwandeln.

Schritt 1: Definieren Sie eine Anforderungsfunktion mit Rückrufen

Beginnen Sie mit der Erstellung einer grundlegenden XHR-Anfragefunktion, die Rückrufe verwendet:

Schritt 2: Einführung der Promise-Konstruktion

Um dies zu transformieren Funktion in eine versprochene Version umwandeln, nutzen Sie den Promise-Konstruktor:

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

Schritt 3: Erweitern mit Parametern und Optionen

Um die Flexibilität der Anforderungsfunktion zu verbessern, führen Sie Parameter für Methode, URL, und ein optionales Optionsobjekt:

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

Verwendung

Mit der versprochenen makeRequest-Funktion, XHRs können nahtlos als asynchrone Vorgänge ausgeführt werden:

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

Alternativer Ansatz

Eine Alternative zur Promisifizierung ist die Verwendung der Fetch-API, die integrierte Unterstützung für Versprechen bietet. Beachten Sie jedoch, dass der Abruf möglicherweise nicht in allen Browsern unterstützt wird und möglicherweise eine Polyfüllung erfordert.

makeRequest({
  method: 'GET',
  url: 'http://example.com'
})
.then(function (datums) {
  return makeRequest({
    method: 'POST',
    url: datums.url,
    params: {
      score: 9001
    },
    headers: {
      'X-Subliminal-Message': 'Upvote-this-answer'
    }
  });
})
.catch(function (err) {
  console.error('Augh, there was an error!', err.statusText);
});

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