抛弃我吧，我就是那个总是忘记缓存的前端开发者，直到遇见了 SWR

布衣1983
2,006 阅读7分钟

为什么会有篇文章，事情是这样的

WechatIMG5.jpeg

就是每次这位大佬每次说话，我都恨不得去现场百度，让我很汗颜，通了个宵，把大佬讲的东西给整理了一下，学习了一下！如有不对的地方，请指正 @方土 juejin.cn/user/412502…

下面是一篇关于如何使用 SWR 库的文章，包括代码示例和 API 介绍。

SWR 库的介绍

SWR 是一个 React Hooks 库，可以帮助我们实现数据的缓存和重新验证。它基于 stale-while-revalidate 策略，可以提高数据的可用性和性能。使用 SWR，我们可以轻松地从远程服务器获取数据，并将数据缓存在本地。在数据过期后，SWR 会在后台发送一个请求以重新验证数据，并自动更新缓存。这样，我们就可以在几乎不影响用户体验的情况下，实现快速和高效的数据获取和更新。

SWR 库的使用

要使用 SWR 库，我们首先需要在 React 组件中引入 useSWR 函数。然后，我们可以通过调用 useSWR 函数来获取数据。下面是一个基本的示例：

import useSWR from 'swr';

function MyComponent() {
  const { data, error } = useSWR('/api/data', fetcher);

  if (error) return <div>Failed to load</div>;
  if (!data) return <div>Loading...</div>;

  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.description}</p>
    </div>
  );
}

async function fetcher(url) {
  const res = await fetch(url);
  return res.json();
}

在这个示例中，我们调用了 useSWR 函数，并传入了一个远程服务器的 URL 和一个 fetcher 函数。fetcher 函数会从指定的 URL 中获取数据，并将数据转换成 JSON 格式。useSWR 函数会返回一个对象，其中包含了从远程服务器获取的数据和可能的错误信息。我们可以根据这些信息来显示不同的 UI。

在上面的示例中，我们使用了两个条件语句来显示不同的 UI。如果出现了错误，我们会显示一个“Failed to load”的消息。如果数据还没有加载完成，我们会显示一个“Loading...”的消息。否则，我们会将数据渲染成一个标题和一段描述。

在使用 SWR 时，我们还可以通过传递一个可选的“选项”对象来自定义缓存和重新验证的行为。下面是一个示例：

import useSWR from 'swr';

function MyComponent() {
  const { data, error } = useSWR('/api/data', fetcher, {
    refreshInterval: 5000,
    dedupingInterval: 10000
  });

  // ...
}

在这个示例中，我们在 useSWR 函数中传递了一个“选项”对象，其中包含了两个属性：refreshInterval 和 dedupingInterval。refreshInterval 表示重新验证数据的时间间隔，单位是毫秒。在这个示例中，我们将其设置为 5000，表示每隔 5 秒钟重新验证一次数据，dedupingInterval 表示重新验证数据时的去重时间间隔，单位也是毫秒。如果在这个时间间隔内发起了多个请求，只有第一个请求会被发送，其他请求会被忽略。在这个示例中，我们将其设置为 10000，表示如果在 10 秒钟内发起了多个请求，只有第一个请求会被发送。

除了 refreshInterval 和 dedupingInterval，我们还可以通过传递其他选项来自定义 SWR 的行为。下面是一些常用的选项：

  • initialData: 初始数据，可以是任何 JavaScript 对象或数组。
  • revalidateOnFocus: 是否在页面获得焦点时重新验证数据，默认为 true。
  • revalidateOnReconnect: 是否在网络连接重新连接时重新验证数据，默认为 true。
  • errorRetryInterval: 如果数据获取失败，下一次重新验证的时间间隔，单位是毫秒。
  • errorRetryCount: 如果数据获取失败，最多尝试重新验证的次数。

除了这些选项，我们还可以通过传递一个 key 参数来指定缓存的键。如果没有指定 key 参数，SWR 将使用 URL 作为键。例如：

const { data } = useSWR('/api/data', fetcher, { key: 'myData' });

在这个示例中，我们将缓存的键设置为“myData”，而不是默认的 URL。

SWR 库的 API

SWR 库提供了一些函数和类型，可以帮助我们实现数据的缓存和重新验证。下面是一些常用的 API：

useSWR

function useSWR(key: any, fetcher?: Fetcher, options?: ConfigInterface): SWRResponse<any, any>

这个函数用于从远程服务器获取数据，并将数据缓存在本地。它接受三个参数：

  • key: 缓存的键，用于标识缓存的数据。
  • fetcher: 获取数据的函数，可以是异步函数或 Promise。
  • options: 选项对象，用于自定义缓存和重新验证的行为。

这个函数会返回一个对象，其中包含了从远程服务器获取的数据和可能的错误信息。它还包含了一些方法，可以帮助我们更新缓存和重新验证数据。

mutate

function mutate(key: any, data: any, shouldRevalidate?: boolean): Promise<any>

这个函数用于手动更新缓存的数据，并触发重新验证数据的过程。它接受三个参数：

  • key: 缓存的键，用于标识缓存的数据。
  • data: 要更新的数据。
  • shouldRevalidate: 是否在更新数据后重新验证数据，默认为 true。

这个函数会返回一个 Promise 对象，用于异步获取更新后的数据。

mutateIfStale

function mutateIfStale(key: any, data: any, shouldRevalidate?: boolean): Promise<any>

这个函数与 mutate 函数类似，用于手动更新缓存的数据，但它只会在缓存的数据过期时才触发重新验证数据的过程。它接受三个参数：

  • key: 缓存的键，用于标识缓存的数据。
  • data: 要更新的数据。
  • shouldRevalidate: 是否在更新数据后重新验证数据，默认为 true。

这个函数会返回一个 Promise 对象，用于异步获取更新后的数据。

cache

const cache = new LRUCache({ maxAge: 1000 * 60 * 60 * 24 })

这个对象用于存储缓存的数据，它是一个 LRUCache 类型的实例。我们可以通过向构造函数传递选项对象来自定义缓存的行为。例如，上面的示例中，我们将最大缓存时间设置为 24 小时。

SWRConfig

function SWRConfig(props: SWRConfigProps): React.ReactElement

这个组件用于向 SWR 库提供全局选项，以便在整个应用程序中共享。它接受一个名为 props 的参数，其中包含了一些选项。例如：

<SWRConfig value={{ refreshInterval: 10000 }}>
  <App />
</SWRConfig>

在这个示例中，我们将全局选项设置为 { refreshInterval: 10000 }，意味着所有使用 useSWR 的组件都将具有相同的刷新时间间隔。

也可以用于Vue

SWR 库不仅仅适用于 React 应用程序，也可以用于 Vue 应用程序。在 Vue 中，我们可以使用 @vue/composition-api 库中的 useSWR 函数来使用 SWR。

首先，我们需要安装 @vue/composition-api 和 swr 依赖：

npm install @vue/composition-api swr

然后，我们可以在组件中导入 useSWR 函数并使用它：

<template>
  <div>
    <p>{{data}}</p>
    <button @click="revalidate">Refresh</button>
  </div>
</template>

<script>
import { useSWR } from 'swr'
import { ref } from '@vue/composition-api'

export default {
  setup() {
    const url = 'https://api.example.com/data'
    const { data, error, revalidate } = useSWR(url, fetcher)

    return {
      data: ref(data),
      error,
      revalidate
    }
  }
}

async function fetcher(url) {
  const response = await fetch(url)
  const data = await response.json()
  return data
}
</script>

在这个示例中，我们使用了 useSWR 函数来获取数据，并使用 ref 函数将其包装为响应式对象。我们还定义了一个 fetcher 函数，用于获取数据。在模板中，我们可以直接使用 data 变量来展示数据，并在按钮上添加一个 revalidate 方法来手动重新验证数据。

注意，与 React 中的 useSWR 函数不同，在 Vue 中，我们需要使用 @vue/composition-api 中的 ref 函数来包装返回的数据，以便 Vue 可以自动追踪数据的变化。

总结

SWR 库是一个非常有用的工具，可以帮助我们轻松地实现数据的缓存和重新验证。它提供了许多选项和 API，可以自定义缓存和重新验证的行为。通过使用 SWR，我们可以减少网络请求，提高应用程序的性能和用户体验。

avatar
文章
阅读
粉丝