为什么使用 swr
仅需一行代码，你就可以简化项目中数据请求的逻辑，并立即拥有以下这些不可思议的特性：
- 极速、轻量、可重用的 数据请求
- 内置 缓存 和重复请求去除
- 实时 体验
- 传输和协议不可知
- 支持 SSR / ISR / SSG
- 支持 TypeScript
- React Native
SWR 涵盖了性能，正确性和稳定性的各个方面，以帮你建立更好的体验：
- 快速页面导航
- 间隔轮询
- 数据依赖
- 聚焦时重新验证
- 网络恢复时重新验证
- 本地缓存更新 (Optimistic UI)
- 智能错误重试
- 分页和滚动位置恢复
- React Suspense
基础使用
借助axios
import useSWR from "swr";
import axios from 'axios'
const fetcher = url => axios.get(url).then(res => res.data)
function App () {
const { data, error } = useSWR('/api/data', fetcher, options)
// ...
}
项目开发中使用
在实际开发中的使用，需要进行封装使用，提高代码质量；以及更具业务场景的一些自定义场景的实现；
主要是fetcher函数的实现；
- 请求拦截部分，header，token, 一些公有参数的添加等；
- 请求成功的响应处理，返回数据的处理；
- 请求错误处理；
- 轮询处理；
- 请求超时，无权限等处理；
- 请求缓存等
具体实现可看源码：
