前言
在前端工作中，我们经常需要跟后端进行数据交互。这时候就需要使用 Ajax 技术（Asynchronous JavaScript and XML）来实现异步请求。在早期，我们常常使用原生的 XMLHttpRequest(XHR) 来发送异步请求。随着 ES6 的推广，现在我们可以使用 Promise 来封装 XHR 请求。
在这篇文章中，我们将介绍如何使用 ES6 中的 Promise 封装 XHR 请求，以及如何使用封装后的 XHR 函数实现数据的异步请求和处理。
Promise 简介
在 ES6 中，Promise 是一种封装异步操作的对象。它提供了一种更加优雅的方式来组织异步请求，并且可以很好地处理异步操作返回的结果。Promise 提供了 then 方法来处理异步操作的成功结果，也提供了 catch 方法来处理异步操作的错误结果。
Promise 具有以下特点：
- Promise 对象只能从异步操作中得到结果，不能直接获取结果。
- Promise 对象具有状态，分别为：pending（等待结果）、fulfilled（操作成功）、rejected（操作失败）。
- Promise 对象一旦发生状态变化，就会自动执行相应的处理函数，无需手动触发。
封装 XHR 请求
封装 XHR 请求，可以让我们的代码更加优雅，使得我们的异步操作可以更加顺畅和可控。下面是一个基本的 XHR 封装函数：
-- -------------------- ---- -------
-------- ------------ ------- ----- -
------ --- ------------------------- ------- -
--- --- - --- ----------------
---------------- ---- -----
---------------------- - ---------- -
-- --------------- --- - -- ---------- --- ---- -
-------------------------
- ---- -
----------------------
-
-
----------- - ---------- -
----------------------
-
------------------------------------ -------------------
--------------
--
-封装 XHR 请求的基本思路是创建一个 Promise 对象，并在 Promise 对象中对异步请求进行封装。在封装 XHR 请求时，我们需要传入三个参数：url、method 和 data。其中，url 表示数据请求的地址，method 表示 HTTP 请求的方法，data 表示请求发送的数据。
在 Promise 对象的执行过程中，我们需要创建一个 XMLHttpRequest 对象，并通过 open 方法连接远程服务端地址。在 XHR 对象的 statechange 事件中判断返回的状态码和响应文本，并将结果传递给 Promise 对象的 resolve 和 reject 方法。如果发生错误，则会返回错误信息到 reject 中，供 catch 方法捕获。
使用封装的 XHR 函数
封装完成 XHR 函数后，我们可以使用 Promise 的 then 和 catch 方法来处理异步操作的结果和错误信息。下面是一个简单的示例，展示如何使用封装的 XHR 函数来进行异步请求：
request('/api/user/info', 'GET', null)
.then(function(response) {
console.log(JSON.parse(response))
})
.catch(function(error) {
console.log(error)
})在这个例子中，我们调用了封装的 XHR 函数，传入了请求地址、请求方法和发送数据。在 then 方法中，我们处理异步操作的结果，并将其输出到控制台上。而在 catch 方法中，我们处理异步操作的错误信息，并将其输出到控制台上。
总结
ES6 中的 Promise 对象提供了一种更加优雅的方式来组织异步请求。我们可以使用 Promise 封装 XHR 请求，以实现更加可控和优雅的异步操作。在实际的开发过程中，我们可以根据具体需求，选择合适的封装方法和具体的操作方式来实现我们需要的功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64683d9d968c7c53b086ef04