mangosteen day 4 swr原理-我爱编程

当前位置：: 首页; 文章; 前端
详情

mangosteen day 4 swr原理

前端
清蒸鱼q
0

当我们要判断是否用户是否登录使用到SWR

意为 stale-while-reavalidate 这是一个库
意为当用户数据过期将重新发起请求获得最新数据
步骤：首先从缓存中返回显示的是过期的数据，同时会发起fetch请求（重新认证），最后获得最新数据

与zustand进行类比

所有远程的数据(http请求的数据）都缓存到swr中，其余的数据存储到zustand即可

当我们在使用swr发送关联请求的时候

需要使用到Mock

1.当后端还没有接口的时候 需要mock来进行模拟
2.没有实现登陆的情况下，需要改变用户的登陆状态，篡改端口返回的值

利用swr发送请求

const { data: meData, error: meError } = useSWR('/api/v1/me', (path) =&gt; {
    return ajax.get(path)
  })
  const { data: itemsData, error: itemsError } = useSWR( '/api/v1/items', (path) =&gt; {
    return ajax.get(path)
  })

相较于useSWR会自动的调用useEffect
第一个参数传我们访问的路径
第二个我们需要返回我们如何获取对应的数据（代码中的path对应的就是第一个参数的路径）

若两个请求的关系是嵌套的关系可以直接使用?:的方法 如图中的meData是作为依赖只有在第一层请求成功，myData获得值之后才进行第二层的请求

const { data: meData, error: meError } = useSWR('/api/v1/me', (path) =&gt; {
    return ajax.get(path)
  })
  const { data: itemsData, error: itemsError } = useSWR(meData ? '/api/v1/items' : null, (path) =&gt; {
    return ajax.get(path)
  })

免责申明：本站发布的内容（图片、视频和文字）以转载和分享为主，文章观点不代表本站立场，如涉及侵权请联系站长邮箱：xbc-online@qq.com进行反馈，一经查实，将立刻删除涉嫌侵权内容。