imber | imber

2023 年了，你为什么还不用 SWR ？

swr 下载量已经超过了 react-query

alt text

如果 fetcher 是全局配置提供的，可以从参数中忽略

const { data, error, isLoading, isValidating, mutate } = useSWR(
  key,
  fetcher,
  options
)

const { data, error, isLoading, isValidating, mutate } = useSWR(
  key,
  fetcher,
  options
)

基础使用

import useSWR from 'swr'

const fetcher = (url) => fetch(url).then((r) => r.json())

function Profile() {
  const { data, error, isLoading } = useSWR('/api/user/123', fetcher)

  if (error) return <div>failed to load</div>
  if (isLoading) return <div>loading...</div>

  // 渲染数据
  return <div>hello {data.name}!</div>
}

import useSWR from 'swr'

const fetcher = (url) => fetch(url).then((r) => r.json())

function Profile() {
  const { data, error, isLoading } = useSWR('/api/user/123', fetcher)

  if (error) return <div>failed to load</div>
  if (isLoading) return <div>loading...</div>

  // 渲染数据
  return <div>hello {data.name}!</div>
}

可全局错误处理
自动重新请求（聚焦时重新请求、定期重新请求、重新连接时重新请求）
传入参数，传多个参数、传对象