xhr-request-promise 是一个开源的 npm 包，在前端开发中能够提供方便的 xhr 请求功能。通过这个包，我们可以更加方便地实现前端与后端的交互。本文将详细介绍如何使用 xhr-request-promise 进行请求的发送和处理，并提供示例代码和实际应用举例供大家参考。
安装 xhr-request-promise
在使用 xhr-request-promise 之前，需要先在本地安装此包。通过以下命令可以在当前项目中安装 xhr-request-promise。
npm install xhr-request-promise --save
这样安装后，xhr-request-promise 就已经集成在我们的项目中了。
发送 xhr 请求
使用 xhr-request-promise 发送请求十分简单，只需要传入请求的地址、请求方式以及需要发送的数据，即可完成请求的发送。示例代码如下：
const xhr = require('xhr-request-promise');
xhr('/api/getData?param1=value1¶m2=value2', { method: 'GET' })
.then(function(data) {
console.log(data);
})
.catch(function(error) {
console.error(error);
});通过这段代码，我们可以发送一个 GET 请求到指定的地址。其中，地址参数 '/api/getData?param1=value1¶m2=value2' 是请求的目标地址，并且在地址后面追加了请求参数。同时，配置参数 { method: 'GET' } 指定了请求的方式为 GET。xhr-request-promise 底层采用 XHR 发起请求，因此，此处使用的方式和配置和原生 XHR 发送请求时非常类似。
处理 xhr 响应
发送请求后，我们需要对服务器返回的数据进行处理。在 xhr-request-promise 中，提交请求后的响应数据将会被封装为对应的 JavaScript 对象返回。这个对象包含了若干属性，其中最重要的是 responseText 属性。该属性是响应的原始字符串数据，我们需要根据自己的需求进行解析。示例代码如下：
-- -------------------- ---- -------
----- --- - -------------------------------
----------------------------------------------- - ------- ----- --
-------------------- -
----- ------------ - ------------------
-- -------- ------------ ----
--------------------------
--
---------------------- -
---------------------
---在这个例子中，我们通过 data.responseText 获取到服务器传送过来的数据，并进行了简单的 console.log 输出。在实际应用中，我们可以根据返回的数据类型以及接口的约定，对数据进行具体的解析和处理。
实例应用
下面我们给出一个实际应用的例子。假设我们正在开发一个基于 AJAX 技术构建的图库网站。在网站的后端，我们已经开发好了一些 RESTful API，通过这些 API，我们能够做到：
- 查询整个图库中所有的图片；
- 查询某个特定分类下的所有图片；
- 查询指定图片的详细信息。
以访问查询某个特定分类下的所有图片为例，我们可以使用 xhr-request-promise 发送如下请求。
-- -------------------- ---- -------
----- --- - -------------------------------
------------------------------------ - ------- ----- --
-------------------- -
----- ------------ - ------------------
----- ------ - -------------------------
-- -----------
---------------------
--
---------------------- -
---------------------
---
-------- -------------------- -
-- -------
-在这个例子中，我们向服务器发送了一个 GET 请求，请求地址为 /api/getImages，其中 categoryID=123 表示查找分类编号为 123 的图片。服务器返回的数据是一个 JSON 字符串，我们通过 JSON.parse() 方法将其转换成 JavaScript 对象。最后，在 renderImages 函数中将结果渲染到页面上。
总结
本文详细介绍了如何使用 xhr-request-promise 完成前端与后端的数据交互。通过该 npm 包，我们能够方便地向服务器发送 HTTP 请求，并实现多种请求方式。同时，解析服务器返回的数据也非常简单，只需要通过 data.responseText 获取到原始的字符串数据后，再根据接口的约定进行数据解析即可。希望本文能够为大家提供更多的前端开发参考。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/57583