简介
npm 包 @building-block/xhr-fetch 是一个用于发送 XHR/XMLHttpRequest 和 Fetch 请求的 JavaScript 工具集。它的主要目的是为前端开发者提供更加便捷的请求发送方式，使得开发者能够更加方便地使用原生 JavaScript 发送请求，同时提供了一些可自定义的接口以满足特定需求。
安装
在使用 @building-block/xhr-fetch 前，需要使用 npm 或 yarn 安装该包。
npm install @building-block/xhr-fetch --save
或者
yarn add @building-block/xhr-fetch
示例
示例代码如下：
-- -------------------- ---- -------
------ - ---- ----- - ---- ----------------------------
-----
---- --------------------------
------- ------
------------- -------
-------- -
--------------- -------------------
-------------- ------- ------
--
----- - --- - --
------------------ -- -
---------------- --------- -- ----------
---
-------
---- --------------------------
------- -------
------------- -------
-------- -
--------------- ------------------------------------
-------------- ------- ------
--
----- -------------------
------------------ -- -
------------------ --------- -- ----------
---使用指南
发送 XHR 请求
使用 xhr 函数发送 XHR 请求。
-- -------------------- ---- -------
-----
---- --------------------------
------- ------
------------- -------
-------- -
--------------- -------------------
-------------- ------- ------
--
----- - --- - --
------------------ -- -
---------------- --------- -- ----------
---xhr 函数接受一个配置对象作为参数，该对象包含了发送请求所需的参数。以下是参数列表：
| 参数名 | 类型 | 描述 |
|---|---|---|
url |
string |
请求的 URL |
method |
string |
请求的方法，必选参数 |
responseType |
string |
响应类型，可以设置为 text、json 或 blob，默认为 text |
headers |
object |
请求头 |
data |
object |
请求体，使用 JSON 格式 |
发送 Fetch 请求
使用 fetch 函数发送 Fetch 请求。
-- -------------------- ---- -------
-------
---- --------------------------
------- -------
------------- -------
-------- -
--------------- ------------------------------------
-------------- ------- ------
--
----- -------------------
------------------ -- -
------------------ --------- -- ----------
---fetch 函数同样接受一个配置对象作为参数。以下是参数列表：
| 参数名 | 类型 | 描述 |
|---|---|---|
url |
string |
请求的 URL |
method |
string |
请求的方法，必选参数 |
responseType |
string |
响应类型 |
headers |
object |
请求头 |
data |
string |
请求体，使用 URL 编码的字符串格式 |
timeout |
number |
请求超时时间，单位为毫秒，默认为 0，即不设置超时时间 |
拦截器
@building-block/xhr-fetch 还提供了拦截器，可以在发送请求和响应过程中进行拦截和处理。
以下是拦截器的用法：
-- -------------------- ---- -------
------ - ---- ------ ---------------------- ---------------------- - ---- ----------------------------
------------------------------ -- -
--------------------- -- --------
------ -------
---
--------------------------------- -- -
---------------------- -- ----------
------ ---------
---
-----
---- --------------------------
------- ------
------------- -------
-------- -
--------------- -------------------
-------------- ------- ------
--
----- - --- - --
------------------ -- -
---------------- --------- -- ----------
---
-------
---- --------------------------
------- -------
------------- -------
-------- -
--------------- ------------------------------------
-------------- ------- ------
--
----- -------------------
------------------ -- -
------------------ --------- -- ----------
---自定义请求
如果您需要使用特定的请求方式或者自定义请求逻辑，可以使用 createHttpRequest 和 createFetch 函数来创建一个自定义的请求。
以下是示例代码：
-- -------------------- ---- -------
------ - ------------------ ----------- - ---- ----------------------------
----- ------------- - -------------------
---------------- --------
----- -------- -- -
------------------- -------- -- --------
--
---
----- ----------- - -------------
---------------- --------
----- -------- -- -
------------------- ------ -- --------
--
---
---------------
---- --------------------------
------- ------
------------- -------
-------- -
--------------- -------------------
-------------- ------- ------
--
----- - --- - --
---
-------------
---- --------------------------
------- -------
------------- -------
-------- -
--------------- ------------------------------------
-------------- ------- ------
--
----- -------------------
---结语
@building-block/xhr-fetch 是一个十分实用的工具套件，它包含了丰富的功能和自定义接口，可以方便地满足开发者的多样化需求。通过学习此文，您可以更好地理解和掌握该工具包的使用方法，同时也可以对前端请求发送的方式有更加深入的认识。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067382890c4f7277584307