Promise 如何简化 JavaScript 中的异步 XHR 请求？

Promise 如何使用原生 XHR 启用异步编程

在前端应用程序中使用 XHR 时，通常需要利用 Promise 来简化异步编程。然而，在没有庞大框架的情况下实现 Promisified XHR 可能具有挑战性。

了解原生 XHR

在深入研究 Promisification 之前，让我们回顾一下如何使用回调执行基本的 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();
}

引入 Promise XHR

为了 Promise 原生 XHR，我们利用 Promise 构造函数：

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

现在，我们可以使用 .then() 和 .catch 无缝链接和处理异步 XHR 请求():

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

增强功能

我们可以通过接受可自定义的选项对象来进一步增强 makeRequest 功能：

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

这允许我们指定 POST/PUT 数据和自定义标头等参数：

makeRequest({
  method: 'GET',
  url: 'http://example.com',
  params: {
    score: 9001
  },
  headers: {
    'X-Subliminal-Message': 'Upvote-this-answer'
  }
});

总之，有希望的原生 XHR 提供了一种强大的方法来简化和增强前端应用程序中的异步编程。利用 Promise 构造函数以及可自定义的选项提供了一种灵活高效的方法来处理 XHR 请求。

以上是Promise 如何简化 JavaScript 中的异步 XHR 请求？的详细内容。更多信息请关注PHP中文网其他相关文章！