umijs@use-request源码解读

Posted 2023-04-21

参考技术A

涉及ts的变量声明、接口、类、函数、泛型等

ts语法知识

前提：定义了一个 Fecth 类，用于处理请求数据。

1）用法

2）源码分析

第一次调用时，缓存中不存在数据，则会自动执行获取数据

1）用法

2）源码分析

当开启 manual 禁止自动请求时，将 run 函数暴露给用户调用。

如果 fetchKey 不存在，则新建 Fetch 实例，保存到 feches 对象中，并调用实例的 run ，最后返回调用结果数据。
如果 fetchKey 存在，则直接调用 Fetch 实例的 run 。

作用：在取数结束后设定 setTimeout 重新触发下一轮取数。

1）用法

2）源码分析

在 Fetch 类中 _run(...args: P) 的实际取值函数中，最后会判断，是否设置了轮询 pollingInterval ，设置了则开启定时器。 注意，前提是当前页面没有被隐藏。

定时器及时销毁：在 _run 函数最开始，会对现有的定时器先进行销毁。

作用：设置 options.cacheKey 后开启对请求结果缓存机制，下次请求前会优先返回缓存并在后台重新取数。

1）用法

2）源码分析

每次请求都是创建一个 Fetch 实例，并用 fetchKey 进行唯一标识，并且调用 run 函数时，优先调用缓存实例。

1）用法

2）源码分析

根据传入的 config 配置来判断是否进行防抖和节流分发处理。

1）用法

2）源码分析

预加载本质是缓存机制，通过利用 useEffect 同步缓存实例, 保证缓存数据的最新，然后当需要用到数据时，优先调用缓存实例。

1）用法

2）源码分析

1）用法

2）源码分析

调用 mutate 传入的方法

分页：设置 options.paginated 支持分页场景
加载更多：设置 options.loadMore 支持加载更多的情况

分页和加载原理：在 useAsync 这个基础请求 hook 基础上再包一层 hook ，扩展取数参数与返回结果。

所以，不在此处多余赘述了。

document.visibilityState ：表示下面 4 个可能状态的值
hidden ：页面在后台标签页中或者浏览器最小化
visible ：页面在前台标签页中
prerender ：页面在屏幕外执行预渲染处理 document.hidden 的值为 true
unloaded ：页面正在从内存中卸载

visibilitychange 事件：当文档从可见变为不可见或者从不可见变为可见时，会触发该事件。

函数返回值只会在组件的初始渲染中起作用，后续渲染时会被忽略

分析：对于同一个实例，可能出现多次调用 _run 方法，导致 this.count 和 currentCount 出现数据不同步的情况，比如，第一次调用 _run 后，刚好执行“关键点 闭包取数”后，还未执行到 return , 又执行了 _run ，导致此时 this.count+=1 ，那么第一次调用 _run.currentCount 的值比当前的 this.count 小1。

作用：保证 state 中的数据是最近一次访问接口得到的数据

源码github地址
用法地址
精读《@umijs/use-request》源码

[第25期] 深入解析EventLoop和浏览器渲染帧动画空闲回调的关系 & 精读@umijs/use-request源码

CSP 的主要好处就是可以全面禁止使用不安全的嵌入式 JavaScript。内联 JavaScript（无论是反射的还是存储的），意味着不正确的转义用户输入都可以被 Web 浏览器解释为 JavaScript 代码。通过使用 CSP 禁用嵌入式 JavaScript，你可以有效消除针对你站点的几乎所有 XSS 攻击。

5月19日，Lighthouse 发布了 6.0 版本，带来了非常多的新特性，让我们一起来了解一下吧！

与组件生命周期绑定的 Utils 非常适合基于 React Hooks 来做，比如可以将 “发请求” 这个功能与组件生命周期绑定，实现一些便捷的功能。

这次以 @umijs/use-request 为例子，分析其功能思路与源码。

关于 Event Loop 的文章很多，但是有很多只是在讲「宏任务」、「微任务」，我先提出几个问题：

• 每一轮 Event Loop 都会伴随着渲染吗？
• requestAnimationFrame 在哪个阶段执行，在渲染前还是后？在 microTask 的前还是后？
• requestIdleCallback 在哪个阶段执行？如何去执行？在渲染前还是后？在 microTask 的前还是后？
• resize、scroll 这些事件是何时去派发的。

Ryan 对于 node.js 的十大遗憾之一就是支持了 node_modules，node_modules 的设计虽然能满足大部分的场景，但是其仍然存在着种种缺陷，尤其在前端工程化领域，造成了不少的问题，本文总结下其存在的一些问题，和可能的改进方式。