业务背景
在短视频app源码前后端数据交互场景下,使用最多的一种方式是客户端发起 HTTP 请求,等待服务端处理完成后响应给客户端结果。
但在一些场景下,短视频app源码服务端对数据的处理需要较长的时间,比如提交一批数据,对这批数据进行数据分析,将最终分析结果返回给前端。
如果采用一次 HTTP 请求,用户会一直处于等待状态,再加上界面不会有进度交互,导致用户不知何时会处理完成;此外,一旦刷新页面或者其他意外情况,用户就无从感知处理结果。
面对这类场景,可以借助 「HTTP 轮询方式」 对交互体验进行优化,具体过程如下:
首先发起一次 HTTP 请求用于提交数据,之后启动轮询在一定间隔时间内查询分析结果,在这期间后台可将分析进度同步到前端来告知用户处理进度;此外即使刷新再次进入页面还可以通过「轮询」实时查询进度结果。
下面,我们来看看代码层面看如何实现这类场景。
JS 实现轮询的方式
在实现代码之前,我们需要先明确 JS 实现轮询的方式有哪些,哪种方式最适合使用。
1. setInterval
作为前端开发人员,提起轮询第一时间能想到的是计时器 setInterval,它会按照指定的时间间隔不间断的轮询执行处理函数。
let index = 1;setInterval(() => {console.log('轮询执行: ', index ++); }, 1000);
回过头来看我们的场景:要轮询的是 异步请求(HTTP),请求响应结果会受限制网络或者短视频app源码的服务器处理速度,显然 setInterval 这种固定间隔轮询并不适合这个场景。
2. Promise + setTimeout sleep
setInterval 的不足之处在于 轮询间隔时间 在异步请求场景下无法保证两个请求之间的间隔固定。要解决这个问题,可以使用 sleep 睡眠函数来控制间隔时间。
JS 中没有提供 sleep 相关方法,但可以结合 Promise + setTimeout 来实现。
const sleep = () => {return new Promise(resolve => {setTimeout(resolve, 1000);}); }
sleep 仅控制了轮询间隔,而轮询的执行机制需要我们手动根据异步请求结果来实现,比如下面通过控制 while 循环的条件:
const start = async () => {let i = 0;while (i < 5) {await sleep();console.log(`第 ${++ i} 次执行`);} }start();
使用轮询的时候可以借助 async/await 同步的方式编写,提高代码阅读质量。
实现异步请求轮询
下面我们通过一个完整示例理解 轮询异步请求 的实现及使用注意事项。
首先我们定义两个变量:index 用于控制何时停止轮询,timer 则用于实现中断轮询。
let index = 1; let timer = 0;
这里,我们定义 syncPromise 来模拟异步请求,可以看作是一次 HTTP 请求,当进行 5 次异步请求后,会返回 false 表示拿到数据分析结果,停止数据查询轮询:
const syncPromise = () => {return new Promise(resolve => {setTimeout(() => {console.log(`第 ${index} 次请求`);resolve(index < 5 ? true : false);index ++;}, 50);}) }
现在,我们实现 pollingPromise 作为 sleep 睡眠函数使用,去控制轮询的间隔时间,并在指定时间执行异步请求:
const pollingPromise = () => {return new Promise(resolve => {timer = setTimeout(async () => {const result = await syncPromise();resolve(result);}, 1000);}); }
最后,startPolling 作为开始轮询的入口,包含以下逻辑:
1)在轮询前会清除正在进行的轮询任务,避免出现多次轮询;
2)如果需要,在开始轮询时会立刻调用异步请求查询一次数据结果;
3)最后,通过 while 循环根据异步请求的结果,决定是否继续轮询;
const startPolling = async () => {// 清除进行中的轮询,重新开启计时轮询clearTimeout(timer); // !!! 注意:清除计时器后,会导致整个 async/await 链路中断,若计时器的位置下方还存在代码,将不会执行。index = 1;// 立刻执行一次异步请求let needPolling = await syncPromise();// 根据异步请求结果,判断是否需要开启计时轮询while (needPolling) {needPolling = await pollingPromise();}console.log('轮询请求处理完成!'); // 若异步请求被 clearTimeout(timer),这里不会被执行打印输出。 }const start = async () => {await startPolling();console.log('若异步请求被 clearTimeout(timer),这里将不会被执行'); } start();
不过,需要注意的是:一旦清除计时器后,会导致整个 async/await 链路中断,若计时器的位置下方还存在代码,将不会执行。
假设当前执行了两次轮询被 clearTimeout(timer) 后,从 startPolling 到 start 整个 async/await 链路都会中断,且后面未执行的代码也不会被执行。
基于以上规则,异步轮询的处理逻辑尽量放在 syncPromise 异步请求核心函数中完成,避免在开启轮询的辅助函数中去实现。
使用轮询的其他场景
在短视频app源码中,使用轮询的场景还有很多。
通常我们考虑首屏加载速度,会将一些非主要启动程序的资源改用 动态异步 的方式去加载。
如果某个页面渲染时依赖了异步加载的脚本资源,就会出现无法拿到资源变量导致报错情况,因为这个时候其实资源还没有加载完成。
所以就需要一种手段,在资源加载完成后再让页面拿去使用,轮询脚本资源变量是否存在可以作为一种处理方式。
/*** 轮询查询异步资源的加载状态*/ export const pollingAsyncResource = (handler: Function, condition: () => unknown) => {let timer = 0;if (!!condition()) {// 静态资源已加载完成 handler();} else {// 启动轮询查询静态资源加载状态timer = window.setInterval(() => {if (condition()) {// 静态资源已加载完成 clearInterval(timer);handler();}}, 50);} }// 使用 pollingAsyncResource(() => // 使用资源的具体逻辑, () => window.$ );
在 pollingAsyncResource 中启动 计时器轮询 去查询静态资源是否加载完成。
参数 handler 是资源加载完成后要执行的具体逻辑;condition 则是判断资源是否加载完成的条件,一般脚本资源都采用 umd 模块形式在 window 对象上绑定全局变量。
以上就是短视频app源码,借助轮询优化交互体验, 更多内容欢迎关注之后的文章