简介
hyperduck 是一个基于 Node.js 的用于管理 HTTP 请求及响应的库。它具有灵活性高、易于使用等特点，在前端开发中非常有用。
在本文中，我将为大家介绍 hyperduck 的使用方法及示例，并带大家领略 hyperduck 的魅力。
安装
我们可以通过 npm 安装 hyperduck:
npm install hyperduck
基本用法
hyperduck 提供了一些函数来方便地执行 HTTP 请求及响应。下面是两个使用 hyperduck 获取数据的基本示例：
-- -------------------- ---- -------
----- --------- - ---------------------
-- --- --
------------------------------------------------------------------- -- -
---------------------------
-------------- -- -
-------------------
---
-- ---- --
------------------------------------------------------------ -
------ ------
----- ------
------- -
---------------- -- -
---------------------------
-------------- -- -
-------------------
---其中，get 函数用于执行 GET 请求，post 函数用于执行 POST 请求。这两个函数均返回一个 Promise 对象，因此可以用 then 和 catch 来处理响应结果和错误。
配置
hyperduck 提供了一个全局配置，通过该配置可以设置各种请求的默认属性。以下是默认配置：
-- -------------------- ---- -------
-
-------- ---
-------- -
------- -
------------------- ----------------
--
------- ---
---- ---
----- ---
----- -
--------------- -----------------------------------
--
---- -
--------------- -----------------------------------
--
------ -
--------------- -----------------------------------
--
------- --
--
-------- --
---------------- ------
------------- -------
--------------- -------------
--------------- --------------
-我们可以通过以下方式来修改默认配置：
-- -------------------- ---- -------
----- --------- - ---------------------
-------------------------- - ------
---------------------- -
------- -
--- -----
-
---------------- -- -
----------------------
-------------- -- -
-------------------
---在上例中，我们修改了默认配置的 timeout 属性为 10000。然后通过 params 属性来传递请求参数。
值得注意的是，hyperduck 会优先使用请求配置中的属性，如果请求配置没有设置对应的属性，则使用默认配置中的属性。以下是一个实例：
-- -------------------- ---- -------
----- --------- - ---------------------
-------------------------- - --------------------------
------------------------------- -
-------- -------------------- ------
------- -
--- -----
-
---------------- -- -
---------------------------
-------------- -- -
-------------------
---在上例中，我们修改了默认配置中 baseURL 属性的值，并在 get 请求中传递了 params 参数和一个空的 X-Requested-With 头，这些配置会覆盖默认配置中的那些属性。
拦截器
hyperduck 还提供了拦截器，可以在请求或响应被处理前或者后执行一些操作，比如在请求发送前给请求添加一个 Authorization 头，或者在收到响应后读取响应头信息。拦截器在请求和响应处理管道中起到了一定作用。以下是一个实例：
-- -------------------- ---- ------- ----- --------- - --------------------- ------------------------------------------- -------- - -- ---------- ---------------------------- - ------- - - ----------- ------ ------- -- -------- ------- - -- -------- ------ ---------------------- --- -------------------------------------------- ---------- - -- --------- ------ --------- -- -------- ------- - -- --------- ------ ---------------------- --- -- ------ --- - ---- ---------------- ------------------------------------------ -- - ---------------------- --- ----------------------- -------- ----------------------- -- - ---------------------- ---
在上例中，我们分别定义了请求和响应拦截器，并在 get 和 post 请求中使用了这些拦截器。
取消请求
在前端开发中，有时候我们需要在用户操作某个组件时进行一些异步请求，并且需要在用户离开这个组件后撤销这些请求。cancel token 可以运用到这些场景中。
-- -------------------- ---- -------
----- ----------- - ----------------------
----- ------ - ---------------------
------------------------ -
------------ ------------
----------------- -------- -
-- ---------------------------- -
-------------------- ---------- ----------------
- ---- -
-- ----
-
---
-- ------------ -----
------------------------ -------- -- --- --------在上例中，我们通过创建 CancelToken 对象来控制请求的取消，同时给请求添加了一个 cancelToken 属性，当该属性所关联的 Promise 被取消时，请求自动中止。如果需要手动取消请求，只需调用 source.cancel() 即可。
结束
通过本文的介绍，相信读者们已经对 hyperduck 有了更深的了解。在前端开发中，我们经常要执行各种异步请求，而 hyperduck 能够完美地满足这个需求。相比其它 HTTP 请求库，hyperduck 具有更好的可扩展性和代码复用性。相信，通过本文的学习，能够让读者们更好地使用 hyperduck，同时为前端开发工作带来便利。
参考资料
- hyperduck 官方文档: https://github.com/microlinkhq/hyperduck
- axios: https://github.com/axios/axios
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cbd81e8991b448e6315