SWR

2024年04月09日

柏拉文

越努力，越幸运

一、认识

---

SWR 提供的 useSWR 对于依赖请求的处理如下:

const { data: a} = useSWR("/api/a");
const { data: b} = useSWR(()=> "/api/b?a=" + a.id);
const { data: c} = useSWR(()=> "/api/c?b=" + b.id);
const { data: d} = useSWR(()=> "/api/d?c=" + c.id);

useSWR 如何做到这一点的呢?

每次渲染的时候，SWR 会试着执行 key 函数（例如 ()=> "/api/b?a=" + a.id)，如果这个函数抛出异常，那么就意味着它的依赖还没有就绪（a === undefined），SWR 将暂停这个数据的请求。在任一数据完成加载时，由于 setState 触发重渲染，上述 Hooks 会被重选执行一遍（再次检查数据依赖是否就绪），然后对就绪的数据发起新的一轮请求。

二、实现

---