SWR怎么在请求前加loading状态？

UX芯依提问于 2026-03-26 16:23:18 阅读 5

框架

我用SWR做数据请求，但页面刚进来时是空白的，想加个loading提示，试了下没生效，是不是哪里写错了？

我的代码大概是这样：

import useSWR from 'swr';

function Profile() {
  const { data, error } = useSWR('/api/user', fetcher);
  
  if (error) return <div>出错了</div>;
  if (!data) return <div>加载中...</div>;
  
  return <div>{data.name}</div>;
}

但“加载中…”根本没显示，直接等数据回来才渲染，这不就失去loading的意义了吗？

我来解答赞 3 收藏

反馈

1 条解答

a'ゞ金壵 Lv1

直接这样，在 useSWR 的配置里加个 isLoading 状态就行。把代码改成这样：

function Profile() {

  const { data, error, isValidating } = useSWR('/api/user', fetcher);

  

  if (error) return <div>出错了</div>;

  if (!data || isValidating) return <div>加载中...</div>;

  

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

}

isValidating 是 SWR 自带的 loading 状态，记得用这个就对了。省得自己再搞一套状态管理。

2026-03-26 17:08