在前端开发中，我们经常需要和后端进行数据交互。为了提高开发效率，我们可以使用第三方库来简化代码的编写。其中，swr 就是一个非常好用的 npm 包，能够帮助我们处理网络请求和缓存数据。
swr 的安装
使用 swr 首先需要安装它：
--- ------- --- ------
或者使用 yarn：
---- --- ---
安装完成后，就可以在项目中使用 swr 了。
swr 的基本使用
swr 的使用非常简单，只需要调用 useSWR 方法并传入请求地址即可：
------ ------ ---- ----- -------- ----- - ----- - ----- ----- - - ------------------- ------ -- ------- ------ ----------- -- ---- ---------- -- ------- ------ --------------------- ------ ----------------- -
在上面的代码中，useSWR 方法接收两个参数，第一个参数是请求地址，第二个参数是用于请求数据的方法。我们可以使用 fetch 或 axios 等库来请求数据。
如果数据请求成功，useSWR 会将返回的数据放在 data 变量里，并将 error 置为 null。如果发生错误，useSWR 将返回一个错误对象，包含了错误信息和错误状态码。
swr 的高级用法
除了基本使用方法，swr 还提供了丰富的高级用法，让我们可以更方便地操作数据。
配置缓存时间
useSWR 方法默认会将数据缓存 2 秒，如果频繁地请求同一个地址，swr 会从缓存里取数据，避免重复请求。如果我们需要修改缓存时间，可以传入 revalidateOnMount 参数：
----- - ----- ----- - - ------------------- ------ - ------------------ ---- --
上面的代码中，设置了 revalidateOnMount 参数为 true，swr 在组件挂载时会重新验证缓存时间。
多个请求同时进行
如果页面中需要执行多个请求，可以使用 useSWR 方法的另一个版本 useSWRInfinite。useSWRInfinite 可以让我们以滚动条的方式获取数据，实现分页功能。
例如下面的代码就实现了上拉加载的功能：
-------- ----- -
----- - ----- ------ ----- ------- - - ---------------------- ------------- -- -
-- ------------- -- ------------------- -
-- -------------
------ ----
-
-- --------
------ -------------------------
-- ------
----- ----- - ---- - ----------------- -- -- -------- ------------ --- - --
------ -
-----
------ -- ----------- -- -----------
--------------- -- -------------------
------- ----------- -- ------------ - -------- -------------
------
-
-在上面的代码中，我们设置了一个函数 getFetchUrl，根据传入的 index 返回请求地址。在组件内部，我们使用了 useSWRInfinite 方法，并将 getFetchUrl 和 fetch 方法传入。useSWRInfinite 在第一页请求成功后，会一直请求下一页，直到到达最后一页为止。
手动刷新数据
有时候我们需要手动刷新数据，可以使用 mutate 方法：
-------- ----- -
----- - ----- ------ ------ - - ------------------- ------
------ -
-----
------
------- ----------- -- --------------------------
------
-
-在上面的代码中，我们在useSWR 返回的变量里拿到了 mutate 方法，点击按钮时调用 mutate 即可刷新数据。
总结
在本文中，我们讲解了如何使用 swr 这个 npm 包来处理网络请求和缓存数据。除了基本使用方法，我们还讲解了 swr 的高级用法，包括配置缓存时间、多个请求同时进行和手动刷新数据。swr 的使用简单方便，可以大大提高前端开发效率。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5f3d40ccdbf7be33b2567108