在前端开发中，我们常常会使用到第三方 API，但是这些 API 往往需要我们从服务器端获取数据，而这个数据请求可能会在多次用户交互中频繁出现，导致性能下降。为了避免这种情况，我们可以使用缓存技术，避免重复发送请求，提高前端性能。
在这篇文章中，我将介绍一个 npm 包 @yci/cached-http，它是一个基于缓存的 HTTP 请求工具，可以大大提高前端性能，减少重复请求。
@yci/cached-http 的安装
在使用 @yci/cached-http 之前，你需要先安装它。你可以通过以下几种方式来安装：
使用 npm 安装
npm install @yci/cached-http
使用 Yarn 安装
yarn add @yci/cached-http
使用 CDN 安装
<script src="https://cdn.jsdelivr.net/npm/@yci/cached-http"></script>
@yci/cached-http 的使用
发送 GET 请求
-- -------------------- ---- ------- ------ ---------- ---- ------------------- ----- ---------- - --- ------------- ------------------------------------------------------------------------------ -- - --------------------------- ---------------- -- - ------------------- ---
发送 POST 请求
-- -------------------- ---- ------- ------ ---------- ---- ------------------- ----- ---------- - --- ------------- ----- ---- - - ------ ------ ----- ------ ------- -- -- ------------------------------------------------------------- --------------------- -- - --------------------------- ---------------- -- - ------------------- ---
发送 PUT 请求
-- -------------------- ---- ------- ------ ---------- ---- ------------------- ----- ---------- - --- ------------- ----- ---- - - --- -- ------ ------ ----- ------ ------- -- -- -------------------------------------------------------------- --------------------- -- - --------------------------- ---------------- -- - ------------------- ---
发送 DELETE 请求
-- -------------------- ---- ------- ------ ---------- ---- ------------------- ----- ---------- - --- ------------- --------------------------------------------------------------------------------- -- - --------------------------- ---------------- -- - ------------------- ---
配置请求
你可以通过传递一个配置对象来配置 @yci/cached-http 发送请求的行为。这个配置对象可以包含以下属性：
method（string）：HTTP 请求方法。默认为 GET。url（string）：HTTP 请求 URL。必填参数。headers（object）：HTTP 请求头部信息。默认为空对象。params（object）：HTTP 请求参数。默认为空对象。timeout（number）：设置请求超时时间（毫秒）。默认为 0，即没有超时时间设定。cacheTimeout（number）：设置缓存超时时间（毫秒）。默认为 0，即没有超时时间设定。responseType（string）：设置响应数据的类型。默认为 json。data（object）：作为请求主体发送的数据。默认为空对象。
-- -------------------- ---- -------
------ ---------- ---- -------------------
----- ---------- - --- -------------
----- ------ - -
------- ------
---- -----------------------------------------------
-------- -
--------------- -------------------
--
------- -
--- --
--
-------- -----
------------- ------
------------- -------
----- -
------ ------
----- ------
------- --
--
--
------------------------------------------ -- -
---------------------------
---------------- -- -
-------------------
---结语
@yci/cached-http 是一个很棒的缓存 HTTP 请求库，可以帮助我们提高前端性能。本篇文章介绍了它的安装、使用方法和配置，希望对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600559e081e8991b448d7670