尤雨溪都点赞的swr平替神器

最新推荐文章于 2024-12-10 09:25:39 发布

原创最新推荐文章于 2024-12-10 09:25:39 发布 · 1.4k 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js #javascript

尤雨溪都点赞的swr平替神器

前端开发中的数据获取，向来是让人又爱又恨的部分。而今天我要介绍的SWRV（发音：Swerve），绝对是数据获取的开挂神器。它不仅能让你轻松愉快地搞定数据请求，还能顺手帮你做缓存优化。别眨眼，继续往下看，这里有干货！

软件简介

SWRV 是一个基于 Vue Composition API 的远程数据获取库，专为 Vue 开发者打造。它采用了一种聪明的缓存策略——“Stale-while-revalidate”，啥意思呢？就是先给你看缓存数据（stale），后台再偷偷去请求最新的数据（revalidate），最后悄悄把最新数据替换掉。这样，用户体验飞起，不用等着菊花转转转！

最重要的是，SWRV 其实是 SWR 的 Vue 版本（老伙计们用 React 的可以去看看 SWR）。所以，如果你是 Vue 粉丝，SWRV 让你的数据获取体验更加顺滑。

软件特点

SWRV 的特性足以让你高呼“真香！”。

• 协议无关：你可以用它去请求各种 API，无论是 HTTP 还是 GraphQL。
• 页面秒切：配合缓存，页面跳转那叫一个飞快。
• 支持轮询：你可以设置定期轮询请求，保持数据最新。
• Vue 3 支持：想用 Vue 3？放心搞，完全兼容。
• 焦点重新验证：当用户切回页面时，数据会自动刷新。
• 请求去重：它聪明地帮你去掉重复的请求，节省带宽。
• 错误重试：遇到网络问题？别担心，SWRV 会自动重试。

除了这些，SWRV 还带了各种缓存自定义、错误处理和状态管理功能。如果你需要组件保持数据时刻更新，SWRV 是个理想的选择。

安装指南

你用的是哪种版本的 Vue，直接决定了你装哪个版本的 SWRV：

• Vue 3：yarn add swrv
• Vue 2.7：yarn add swrv@v2-latest
• Vue 2.6 及以下：yarn add swrv@legacy

装好之后，只需要几个简单的步骤，就能让你的应用“起飞”！

使用示例

写个简单的例子让你快速上手。这个例子展示了如何用 useSWRV 在 Vue 组件中获取远程数据，并处理数据加载和错误状态：

<template>
  <div v-if="error">糟糕，加载失败了！</div>
  <div v-if="!data">加载中...</div>
  <div v-else>你好，{{ data.name }}！</div>
</template>

<script>
import useSWRV from 'swrv'
export default {
  setup() {
    const { data, error } = useSWRV('/api/user', fetcher)
    return { data, error }
  }
}
</script>

是不是简单又好用？useSWRV 接受一个唯一的请求 key 和一个 fetcher 函数，它会根据 key 去请求数据，然后返回 data 和 error。数据还没加载好时，data 是 undefined，加载完成后自动更新到 UI。