基本使用

SWR 是基于 React Hook 的，所以在使用的时候也就是一句话搞定。

import useSWR from 'swr';

function Order({ orderId }) {
  const { data, error } = useSWR(`/api/order/${orderId}`, fetcher);

  if (error) return <div>加载错误!</div>;
  if (!data) return <div>加载中...</div>;

  return <div>{data.customer}</div>;
}

从上面这个示例可以看出，SWR 的核心就是 useSWR 这个 Hook，而获取数据的核心函数则是示例中出现的 fetcher 。这个 fetcher 实际上是十分简单的，只需要返回一个 Promise 实例就可以了，对于 fetcher 如何从服务端获取数据，SWR 并不关心。

以下是一个使用原生 fetch 的 fetcher 函数示例，这个 fetcher 函数可以直接被应用于任意 useSWR Hook 中。

const fetcher = (...args) => fetch(...args).then(res => res.json());

通常一个请求会有3种可能的状态：loading 、 ready 、error 。在使用 SWR 时，可以使用 data 和 error 的值来确定当前的请求状态。