作为一个前端开发者，我们经常需要使用 ajax 请求来从服务端获取数据。而在不同的场景下，我们可能需要对请求进行不同的控制，例如：重复请求拦截、请求超时控制、多阶段请求控制等。实现这些功能会增加我们的代码复杂度，而且可能会导致出现一些问题，如重复请求、请求超时等。这时候，keep-request 这个 npm 包就能派上用场了。
keep-request 包是一个 axios 拦截器，内部实现了请求的缓存、请求的过期控制、请求的取消等功能。使用 keep-request，我们可以快速方便地解决上述问题，提高我们的开发效率。
安装使用
在项目根目录下执行以下命令安装 keep-request 包。
npm install keep-request --save
在代码中引入 keep-request 包：
import keepRequest from 'keep-request';
keep-request 的 API 提供了以下方法：
- get(url, config)
- delete(url, config)
- head(url, config)
- options(url, config)
- post(url, data, config)
- put(url, data, config)
- patch(url, data, config)
这些方法与 axios 原生的方法一样。我们可以根据需要在请求的时候指定 url、data 和 config 等选项。
请求重复拦截
当用户频繁地点击操作时，有时候会发出多个相同的请求，这可能会导致服务端的资源浪费，而 keep-request 可以帮我们拦截这些重复请求。
假设我们有以下的代码：
-- -------------------- ---- -------
----- --------- - -- -- -
----- ------- - -
------- -
----- --
----- --
-
-
---------------------- --------
--------- -- -------------------------
-使用 keep-request，只需在 options 对象中加入 keep 属性即可实现请求重复拦截。
-- -------------------- ---- -------
----- --------- - -- -- -
----- ------- - -
------- -
----- --
----- --
--
----- ----
-
---------------------------- --------
--------- -- -------------------------
-当用户多次调用 fetchData 函数时，keep-request 会只执行一次请求，并返回相同的响应结果。
请求超时控制
有时候，服务端响应时间很长，而客户端一直等待，可能会导致用户的体验比较差。keep-request 提供了请求超时控制的功能，允许我们在请求时间过长时，主动取消请求。
使用 keep-request，只需在 options 对象中加入 timeout 属性即可实现请求超时控制。
-- -------------------- ---- -------
----- --------- - -- -- -
----- ------- - -
------- -
----- --
----- --
--
-------- ----
-
---------------------------- --------
--------- -- -------------------------
------------ -- -------------------
-我们在 options 对象中加入了 timeout 属性，设置最大等待时间为 3000ms。当请求等待的时间超过 3000ms 时，keep-request 会主动取消请求，并返回一个超时错误给我们。
多阶段请求控制
有时候，我们需要在一个请求的不同阶段对请求进行控制，例如：一个上传请求需要在上传前、上传中、上传后分别进行不同的处理。keep-request 也提供了多阶段请求控制的功能，允许我们在请求的不同阶段添加自定义逻辑。
使用 keep-request，只需在 options 对象中加入 phases 属性即可实现多阶段请求控制。
-- -------------------- ---- -------
----- ------ - ------ -- -
----- ------- - -
----- -----
------- -
------- -- -- --------------------
------- --------------- -- ------------------ ----------------------
------ -- -- -------------------
-
-
------------------------------- --------
--------- -- -------------------------
------------ -- -------------------
-我们在 options 对象中加入了 phases 属性，设置了三个阶段：before、upload 和 after。当请求进入不同的阶段时，keep-request 会自动调用我们在 phases 对象中设置的回调函数。
总结
keep-request 可以实现多种常见的请求控制方式，减少我们的代码复杂度，提高开发效率。我们可以根据具体的需要，结合上述的实例代码，在我们的项目中使用 keep-request，为用户带来更好的体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066efd4c49986ca68d8a9a