网页端如何在屏幕聚焦时调用API？移动端可使用useFocusEffect

网页端可以通过监听页面可见性或窗口聚焦事件触发API调用，以下是具体实现方案：

原生JavaScript实现 #

最可靠的方式是监听visibilitychange事件，它会在页面可见状态切换时触发（比如从其他标签页切回、窗口最小化后恢复、切换应用等）。当document.visibilityState等于visible时，即可调用API。

// 定义API调用逻辑
async function fetchData() {
  try {
    const response = await fetch('你的API接口地址');
    const data = await response.json();
    console.log('API响应数据:', data);
    // 这里添加数据处理逻辑
  } catch (error) {
    console.error('API调用失败:', error);
  }
}

// 监听页面可见性变化
document.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'visible') {
    fetchData();
  }
});

你也可以选择监听window.focus事件，它在窗口获得焦点时触发（比如用户点击页面标签切回），但注意该事件不会覆盖页面被系统隐藏的场景（比如切换到其他应用）：

window.addEventListener('focus', fetchData);

React框架实现 #

如果使用React，可以通过useEffect钩子注册事件监听，同时记得在组件卸载时清理监听，避免内存泄漏：

import { useEffect } from 'react';

function App() {
  const fetchData = async () => {
    try {
      const res = await fetch('你的API接口地址');
      const data = await res.json();
      // 处理获取到的数据
    } catch (err) {
      console.error('请求出错:', err);
    }
  };

  useEffect(() => {
    // 处理页面可见性变化
    const handleVisibilityChange = () => {
      if (document.visibilityState === 'visible') {
        fetchData();
      }
    };

    // 处理窗口聚焦
    const handleWindowFocus = () => {
      fetchData();
    };

    // 注册事件监听
    document.addEventListener('visibilitychange', handleVisibilityChange);
    window.addEventListener('focus', handleWindowFocus);

    // 组件卸载时移除监听
    return () => {
      document.removeEventListener('visibilitychange', handleVisibilityChange);
      window.removeEventListener('focus', handleWindowFocus);
    };
  }, []); // 空依赖确保只注册一次监听

  return <div>你的组件内容</div>;
}

优化建议 #

如果页面频繁切换，建议给API调用添加防抖处理，避免短时间内重复请求：

let debounceTimer;
async function fetchData() {
  // 清除上一次的定时器
  if (debounceTimer) clearTimeout(debounceTimer);
  // 延迟300ms执行请求
  debounceTimer = setTimeout(async () => {
    try {
      const response = await fetch('你的API接口地址');
      const data = await response.json();
      console.log(data);
    } catch (err) {
      console.error(err);
    }
  }, 300);
}

内容的提问来源于stack exchange，提问作者Nikita Shah