如何使用 JavaScript Promisify 本机 XHR 请求？

如何 Promisify 原生 XHR

背景

在现代前端开发中，Promise 已成为管理异步操作的重要工具。虽然许多框架提供了内置的承诺机制，但也可以使用本机代码来实现此功能。本指南演示如何将本机 XHR (XMLHttpRequest) 请求转换为 Promise。

第 1 步：定义带有回调的请求函数

首先创建一个使用回调的基本 XHR 请求函数：

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

第 2 步：引入 Promise 构造

将此函数转换为promisified 版本，利用 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();
  });
}

第 3 步：使用参数和选项进行增强

为了提高请求函数的灵活性，引入 method、url 和可选参数options 对象：

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

用法

通过承诺的 makeRequest 函数，XHR 可以作为异步操作无缝执行：

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

替代方法

承诺化的替代方法是使用 fetch API，它为承诺提供内置支持。但是，请记住，并非所有浏览器都支持 fetch，并且可能需要填充。

以上是如何使用 JavaScript Promisify 本机 XHR 请求？的详细内容。更多信息请关注PHP中文网其他相关文章！