在前端开发中，我们通常需要与服务器进行数据交互，而 XMLHttpRequest（XHR）是实现这一目的最基本的方式之一。然而，XHR 默认是异步的，并使用回调函数来处理响应。这种方式难以管理和维护，因此，Promisify 是一种流行的技术，可以将异步回调转换为 Promise。
本文将介绍如何使用 Promisify 封装原生 XHR，以简化代码并提高可读性和可维护性。
Promisify 原理简介
Promisify 是一种将回调 API 转换为 Promise 的技术。通过封装异步方法，使其返回 Promise，开发者可以利用 Promise 的链式调用、错误处理和其他功能，使代码更加简洁易懂。
Promisify 可以手动实现，也可以使用第三方库，例如 bluebird 或 util.promisify。在本文中，我们将演示手动实现的过程。
实现 Promisify XMLHttpRequest
在 Promisify XMLHttpRequest 之前，让我们先了解以下 XMLHttpRequest 的基础知识：
-- -------------------- ---- -------
----- --- - --- -----------------
--------------- -------------
-----------
---------------------- - ---------- -
-- --------------- --- - -- ---------- --- ---- -
------------------------------
-
--以上是一个最基本的 XMLHttpRequest 请求示例，通过调用 open 方法指定请求方式和地址，再调用 send 方法发送请求，最后通过 onreadystatechange 监听响应状态和结果。
下面，我们将对以上代码进行 Promisify 封装：
-- -------------------- ---- -------
-------- ----------------- -------- -
------ --- ------------------------- ------- -
----- --- - --- -----------------
----------------------- -- ------ -----
---------- - ---------- -
-- ------------ -- --- -- ----------- - ---- -
----------------------
- ---- -
---------- ------------------------
-
--
----------- - ---------- -
---------- --------------------- ---------
--
-----------------------
---
-通过上述代码，我们创建了一个名为 xhrPromisify 的函数，该函数接收两个参数：url 和 options。
在函数内部，我们创建了一个新的 Promise，并使用 XHR 对象执行异步操作。一旦请求成功，Promise 将被解析并返回响应数据；如果出现错误，Promise 将被拒绝并返回错误信息。
使用 Promisify XMLHttpRequest
现在，我们已经实现了 Promisify XMLHttpRequest，那么如何使用它呢？
以下是一个示例，演示如何使用 Promisify XMLHttpRequest 获取 JSON 数据：
xhrPromisify('/api/data')
.then(JSON.parse)
.then(function(data) {
console.log(data);
})
.catch(function(error) {
console.error(error);
});在此示例中，我们首先调用 xhrPromisify 函数来发送 GET 请求。然后，我们将获取到的 JSON 数据传递给 JSON.parse 函数，以便解析响应数据。最后，我们将处理过的数据输出到控制台。
总结
在本文中，我们介绍了 Promisify 技术并演示了如何使用 Promisify 封装 XMLHttpRequest。Promisify 使异步代码转换为 Promise 更加简单易懂，提高了代码可读性和可维护性。
如果你正在开发基于 XHR 的应用程序，那么尝试使用 Promisify 来简化你的代码吧！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/10306
