npm 包 xhrp 使用教程
在前端开发中，跨域请求是一个常见的需求。而在跨域请求中，XMLHttpRequest 是一个最常用的工具。但是在实践中却常常遇到一些问题，比如跨域请求的限制、回调函数嵌套等问题。这时我们可以考虑使用开源的 npm 包 xhrp。
xhrp 是什么？
xhrp 是一个封装了 XMLHttpRequest 的 npm 包，使用起来非常简单。它支持 Promise 风格的异步请求和链式调用风格的请求，同时还支持发送二进制数据和自定义请求头等功能。
安装和使用
安装 xhrp 可以使用 npm，命令如下：
npm install xhrp --save
使用也很简单，首先我们需要引入 xhrp：
import {xhrp} from 'xhrp';或者：
const {xhrp} = require('xhrp');接下来我们就可以使用 xhrp 发送请求了。以下是一个简单的示例：
xhrp.get('https://api.github.com/users/xhrp')
.then(response => {
console.log(response.data);
})
.catch(err => {
console.error(err);
})这个示例通过 get 方法，以 Promise 风格发送了一个 GET 请求。在请求成功后，返回的数据会被打印到控制台上；在请求失败后，错误信息也会被打印到控制台上。
支持的方法
除了支持 get 方法外，xhrp 还支持以下方法：
post(url: string, data?: any, config?: AxiosRequestConfig): 发送 POST 请求。put(url: string, data?: any, config?: AxiosRequestConfig): 发送 PUT 请求。delete(url: string, config?: AxiosRequestConfig): 发送 DELETE 请求。head(url: string, config?: AxiosRequestConfig): 发送 HEAD 请求。options(url: string, config?: AxiosRequestConfig): 发送 OPTIONS 请求。request(config?: AxiosRequestConfig): 允许发送自定义请求。
这些方法都返回 Promise 对象，可以使用 Promise 风格的语法进行请求。
支持的配置项
xhrp 还支持一些配置选项，比如直接传入一个 config 对象，其中可以配置以下选项：
url: 请求的URL地址method: HTTP 请求的方法，比如 GET、POST、PUT等headers: 请求头params: URL 参数对象data: 请求体
使用示例：
-- -------------------- ---- -------
------
---- -------------------------------
------- -------
-------- -
------------------- ----------------
--
----- ----------------
----- -------
---- --
--
--
-------------- -- -
---------------------------
--
---------- -- -
-------------------
--链式调用
xhrp 还支持链式调用风格的请求。以下是一个示例：
-- -------------------- ---- -------
----------------------------------------
-------------- ------- ---- ----
----------------------------- ------------------
-------------- -- -
---------------------------
--
---------- -- -
-------------------
--在这个示例中，我们使用 get 方法发起了一个 GET 请求。通过 params 方法，我们传递了一个 URL 参数对象；通过 headers 方法，我们传递了一个请求头对象。
发送二进制数据
如果需要发送二进制数据，可以使用 FormData 对象。以下是一个示例：
-- -------------------- ---- -------
--- ---- - --- -----------
----------------------- --------
--------------------- ----- --------------
------------------ ----- -
-------- -
--------------- ---------------------
-
--
-------------- -- -
---------------------------
--
---------- -- -
-------------------
---在这个示例中，我们创建了一个 FormData 对象，并通过 append 方法向这个对象中添加了两个属性。接着使用 post 方法发送了一个 POST 请求，将刚刚创建的 FormData 对象作为第二个参数传递。在 headers 对象中配置了请求头，告诉服务器请求体数据格式为 multipart/form-data。
自定义请求头
如果需要自定义请求头，可以通过 headers 方法来实现。以下是一个示例：
-- -------------------- ---- -------
----------------- -
-------- -
--------------- -----------
-
--
-------------- -- -
---------------------------
--
---------- -- -
-------------------
---在这个示例中，我们使用 get 方法发送了一个 GET 请求，并通过 headers 方法传递了一个请求头对象，其中包含了一个自定义的请求头 X-Auth-Token。
总结
xhrp 是一个非常实用的 npm 包，封装了 XMLHttpRequest，提供了 Promise 风格和链式调用风格的请求方式，支持发送二进制数据和自定义请求头，让我们在前端开发中可以更加轻松地处理跨域请求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055a5c81e8991b448d7f3f