如何使用 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中文网其他相关文章！