数据获取

SWR获取数据通常都是由fetcher函数来完成的，fetcher函数的返回值一般都是一个Promise。这个fetcher函数所接受的参数就是useSWR中的key，其返回值将赋予useSWR的返回值中的data，如果fetcher使用reject抛出了错误，那么抛出的这个错误将会被赋予error。

以下是一个使用Axios库来进行AJAX访问的SWR示例。

import axios from 'axios';
import useSWR from 'swr';

const fetcher = url => axios.get(url).then(res => res.data);

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

  // 其他处理部分
}

如果需要在SWR Hook中获取数据服务端提供的错误信息或者需要自定义错误信息，那么就需要自定义从fetcher中抛出的错误。例如以下fetcher的示例。

async function fetcher(url) {
  const res = await fetch(url);

  if (!res.ok) {
    const error = new Error('some error message');
    error.info = await res.json();
    error.status = res.status;
    throw error;
  }

  return res.json();
}

在默认情况下，SWR采用指数退避算法来重新发送请求，如果需要自定义或者更加细致的控制SWR进行错误重试的策略，可以使用onErrorRetry配置项来定义。以下是一个自定义错误重试的示例。

const { data, error } = useSWR('/api/usr', fetcher, {
  onErrorRetry: (err, key, config, revalidate, { retryCount }) => {
    // 直接return将会阻止重试动作
    if (error.status === 404) return;

    if (key === '/api/usr') retrun;

    // 当重试次数已经大于10次的时候停止重试
    if (retryCount >= 10) return;

    // 设置5秒以后进行重试动作，revalidate函数就是用于执行重试动作的
    setTimeout(() => revalidate({ retryCount: retryCount }), 5000);
  }
});

SWR的另一个常用特性就是自动重新请求，也就是平时所说的轮询，但是SWR的自动重新请求更加强大了而已。当选项revalidateOnFocus开启的时候，SWR就可以使位于后台的未激活的浏览器标签页或者从休眠状态恢复的系统刷新数据。而定时轮询数据也只需要设置refreshInterval一项而已。