前端异步请求轮询方案

站长

2023年09月06日 13:32 · 阅读数 9

业务背景

在前后端数据交互场景下，使用最多的一种方式是客户端发起 HTTP 请求，等待服务端处理完成后响应给客户端结果。

但在一些场景下，服务端对数据的处理需要较长的时间，比如提交一批数据，对这批数据进行数据分析，将最终分析结果返回给前端。

如果采用一次 HTTP 请求，用户会一直处于等待状态，再加上界面不会有进度交互，导致用户不知何时会处理完成；此外，一旦刷新页面或者其他意外情况，用户就无从感知处理结果。

面对这类场景，可以借助 「HTTP 轮询方式」 对交互体验进行优化，具体过程如下：

首先发起一次 HTTP 请求用于提交数据，之后启动轮询在一定间隔时间内查询分析结果，在这期间后台可将分析进度同步到前端来告知用户处理进度；此外即使刷新再次进入页面还可以通过「轮询」实时查询进度结果。

下面，我们来看看代码层面看如何实现这类场景。

JS 实现轮询的方式

在实现代码之前，我们需要先明确 JS 实现轮询的方式有哪些，哪种方式最适合使用。

1. setInterval

作为前端开发人员，提起轮询第一时间能想到的是计时器 setInterval，它会按照指定的时间间隔不间断的轮询执行处理函数。

let index = 1;

setInterval(() => {
  console.log('轮询执行: ', index ++);
}, 1000);

回过头来看我们的场景：要轮询的是 异步请求（HTTP），请求响应结果会受限制网络或者服务器处理速度，显然 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 异步请求核心函数中完成，避免在开启轮询的辅助函数中去实现。

使用轮询的其他场景

使用轮询的场景还有很多。

通常我们考虑首屏加载速度，会将一些非主要启动程序的资源改用 动态异步 的方式去加载。

如果某个页面渲染时依赖了异步加载的脚本资源，就会出现无法拿到资源变量导致报错情况，因为这个时候其实资源还没有加载完成。

所以就需要一种手段，在资源加载完成后再让页面拿去使用，轮询脚本资源变量是否存在可以作为一种处理方式。

/**
 * 轮询查询异步资源的加载状态
 */
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 对象上绑定全局变量。