SWR 与前端数据依赖请求

原文链接：https://zhuanlan.zhihu.com/p/90660704 作者：shud.in

数据依赖关系其实是一个 DAG（有向无环图）。有些数据依赖于其他，有的则无依赖性：

DAG:

对数据的请求则是对这个有向无环图的遍历。最高效的请求方式一定是在拓扑序上尽可能地并行（每当一个数据的依赖都就绪时，立即发起请求）。

仔细想想，大部分时候（请求并不复杂时），我们都用 Promise.all 来描述这个 DAG。举例来说：

Promise.all([fetchA(), fetchB()]).then([a, b] => fetchC(a, b))

有 A，B，C 三个资源，C 依赖 A 与 B 的结果，那么我们偶尔会写如上代码。实际上描述了如下 DAG：

但是当依赖复杂起来……例如：

有 A，B，C，D 四个资源，C 依赖 A，D 依赖 B 与 C……最并行的写法可能是这样的：

（以上假设在 React 中，我们需要尽快渲染 A，B，C，D）

是不是非常头疼（飞面神教流 React 写法）？可以当笔试题了。

但在 SWR 中，你只需要这么写：

依然满足了最大的并行性，与上面完全等价。只需要描述 DAG 中，每一个点的被指向边即可（数据依赖）。

SWR 是如何做到这一点的呢？

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

（以上翻译自 https://twitter.com/shuding_/status/1189607308931653632）

题外话

最近推特上有许多关于 fetch-as-you-render 的讨论，许多人陷入了对模式本身的争论中。

但这篇文章确实提出 fetch-as-you-render 一个非常大的优势（尽可能避免了 waterfall）。对于 waterfall，包括 React Suspense 也没有很好的方案建议：https://reactjs.org/docs/concurrent-mode-suspense.html#for-library-authors 。

另外对于 fetch-as-you-render 的弱势（需要在渲染时才能开始加载数据），ZEIT 的解决办法是配合 Next.js，对第一轮数据（无其他依赖）自动生成并插入 <link link rel=preload> 标签，改进效果非常明显（https://twitter.com/rauchg/status/1189277551321079810）。

SWR 与前端数据依赖请求相关推荐

Spring Boot + Vue 前后端分离开发，前端网络请求封装与配置
前端网络访问,主流方案就是 Ajax,Vue 也不例外,在 Vue2.0 之前,网络访问较多的采用 vue-resources,Vue2.0 之后,官方不再建议使用 vue-resources ,这个 ...
前端发起请求，后端响应请求的整个过程
文章目录前端注册页面 axios 请求方法 URL 路径配置自定义 axios 方法封装后端创建服务器模块接口方法模块连接数据库本文分为:前端.后端两部分讲诉.以下是前端发送请求到服务 ...
前端异步请求解决方案
前端异步请求解决方案前言一.回调函数二.promise对象三.async await 前言 JavaScript是一门单线程的语言,同一时间节点只能做一个任务,默认是从前往后一次执行. 同步任 ...
前端post请求报400错误
前端post请求报400错误发布时间: 2019-06-05 18:28:54 400的错误是由于发送请求参数没有成功原因:参数名称类型没有对上:或者参数格式不正确参数格式不正确,解决方法:格式 ...
前端发送请求到后端报400错误问题
一般情况下,前端发送请求到后端,报400是由于前后端json对象中的属性名与后端接收请求的实体类的属性名不对应(完全相同)引起的.排除400错误的方法如下: 1.前端发送的属性名和后端实体类的属性名不 ...
前端get请求接收后端传来的二进制文件流blob实现下载功能，解决下载文件打不开问题
解决方法: 前端在请求下载文件接口时,要设置responseType为blob. 前端代码: export function download(url, params) {return ...
前端异步请求数据未获取导致报错解决办法
我们在编写前端程序的时候,往往需要异步请求后端数据,然后拿着得到的数据重现渲染页面.有的时候,数据还没有获取到,这个时候会是undefined形式.比如说,let test = "123&q ...
Nginx映射本地json文件，配置解决浏览器跨域问题，提供前端get请求模拟数据
场景网络接口返回json格式数据,可以直接在浏览器中访问. 可以在页面上右键另存为json格式文件怎样在本地使用nginx配置,模拟get接口返回该json文件,使前端使用ajax请求数据时,可以 ...
promise的状态以及api介绍_前端 api 请求缓存
作者:wsafight https://github.com/wsafight/personBlog/issues/2 web开发时,性能都是必不可少的话题.对于webpack打包的单页面应用程序而言 ...

SWR 与前端数据依赖请求

SWR 是如何做到这一点的呢？

题外话

SWR 与前端数据依赖请求相关推荐

最新文章

热门文章