如何使用 Promise 簡化本機 XHR 請求？

Promisifying Native XHR：一種簡化的方法

在前端應用程式中，本機 Promise 提供了一種處理非同步操作的便利方法。然而，在不依賴複雜框架的情況下，將它們合併到本機 XHR 請求中可能具有挑戰性。本文旨在透過提供有關承諾原生 XHR 請求的簡化指南來彌補這一差距。

了解問題

在承諾 XHR 請求之前，了解以下內容至關重要典型的基於回調的方法。以下是使用回調的基本 XHR 請求的範例：

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

這種方法適用於簡單場景，但缺乏 Promise 提供的靈活性和可組合性。

Promisification 使用Promise 建構子

為了 Promisify XHR 請求，我們可以利用 Promise建構子。這個建構函數接受一個帶有兩個參數的函數，即resolve和reject，它們可以分別被認為是成功和失敗的回呼。

讓我們更新makeXHRRequest以使用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();
  });
}

此程式碼初始化一個新的Promise，開啟一個XHR請求，並處理成功與錯誤

連結與錯誤處理

Promise提供了一種強大的方法來連結多個 XHR 請求並有效處理錯誤。以下是連結請求和處理錯誤的範例：

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

在此程式碼中，我們首先向「example.com」發出GET 請求，然後根據回應向「example.com」發出另一個GET 請求不同的端點（在回應中指定）。在任一請求期間遇到的任何錯誤都將由 catch 子句處理。

自訂參數和標頭

為了使我們的 XHR 承諾更加通用，我們可以自訂參數和標頭。我們將引入具有以下簽名的opts 物件：

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

這是makeRequest 的修改版本，允許自訂參數和標頭：

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

此版本在以下方面提供了更大的靈活性發出XHR 請求，讓您指定自訂參數和標頭。

總之，使用本機 Promise 來承諾 XHR 請求是一種簡單的方法這增強了前端程式碼的靈活性和可組合性。它使您能夠輕鬆發出非同步 XHR 請求、連結它們並有效地處理錯誤。透過利用本文中討論的概念，您可以釋放前端應用程式開發的本機承諾的潛力。

以上是如何使用 Promise 簡化本機 XHR 請求？的詳細內容。更多資訊請關注PHP中文網其他相關文章！