轮询

如果你需要定时触发请求,这在数据大屏的业务中很常见,所以我们内置了一个 轮询 的选项,能轻松帮你解决这件事情。

如下所示,你只需要设置一个 pollingInterval 来告诉我们轮询的间隔时间(毫秒)

当然这只是前菜,我们可以利用这个功能,实现一些更好玩的效果,比如同步多个选项卡,甚至是多个设备间的数据。

在下面的例子 🌰  中,我们使用 iframe 来模拟浏览器的多个选项卡。当你在任意一个选项卡中输入信息时,另外一个选项卡将会同步更新数据。

你也可以复制示例上方地址栏的链接,然后在浏览器中尝试这个功能。

屏幕不可见时轮询

默认情况下,我们会在屏幕不可见时暂停轮询。当屏幕重新聚焦时,重新激活轮询。当然,你可以通过设置 pollingWhenHidden = true,来使得屏幕不可见时也继续发起请求。

import { useRequest } from 'vue-request';

const { data, loading } = useRequest('api/todo', {
  pollingInterval: 1000,
  pollingWhenHidden: true,
});




 

网络离线时轮询

默认情况下,我们会在网络断开时时暂停轮询。当网络恢复正常后,重新激活轮询。当然,你可以通过设置 pollingWhenOffline = true,来使得网络断开时也继续发起请求。

注意

VueRequest 是通过监听 window.ononline 来检查是否正常联网的。在某些情况下,这个事件可能不可靠。详细请查阅 MDN在新窗口打开

import { useRequest } from 'vue-request';

const { data, loading } = useRequest('api/todo', {
  pollingInterval: 1000,
  pollingWhenOffline: true,
});




 

上次更新: 6/6/2023, 4:05:10 AM
贡献者: John