初始化

基于 umijs[3.4.7]、swr[0.5.4]、antd[4.14.1]

  1. # 使用国内源
  2. npm i yarn tyarn -g
  4. # 创建空目录
  5. mkdir myswr && cd myswr
  7. # 使用官方工具创建项目
  8. tyarn create @umijs/umi-app
  10. # 安装依赖
  11. tyarn
  13. # 安装 antd、swr
  14. tyarn add antd swr
  16. # 启动项目
  17. tyarn start

页面布局

代码

  1. // src/index.tsx
  3. import useSWR from 'swr';
  4. import {Divider, Avatar, Skeleton} from 'antd';
  6. function fetchUser() {
  7.   return fetch('api/user').then(res => (res.json()))
  8. }
  10. const MyAvatar = () => {
  11.   const { data, error } = useSWR('/user', fetchUser);
  12.   if (data && !error) {
  13.     return (
  14.       <Avatar src={data.avatar} />
  15.     )
  16.   }
  17.   return (
  18.     <Skeleton.Avatar active shape="circle" />
  19.   )
  20. }
  22. const Content = () => {
  23.   const {data} = useSWR('/user', fetchUser);
  24.   return (
  25.     <h1 style={{textAlign: 'center'}}>
  26.       welcome {data && data.name ? data.name : '--'}
  27.     </h1>
  28.   )
  29. }
  32. export default function Index() {
  33.   return (
  34.     <div>
  35.       <div style={{textAlign: 'right', padding: '24px 24px 0 0'}}>
  36.         <MyAvatar />
  37.       </div>
  38.       <Divider />
  39.       <Content />
  40.     </div>
  41.   );
  42. }

mock 数据

  1. // mock/index.ts
  3. export default {
  4.   'GET /api/user': (req: any, res: any) => {
  5.     let timer = setTimeout(() => {
  6.       res.send({
  7.         name: 'liao',
  8.         avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png'
  9.       });
  10.     }, 3000)
  11.   }
  12. };

结果

user 接口只请求一次
1wsit-5tnyi.gif