JavaScript是否提供内置机制检测过期异步结果？另有哪些替代方案？

JavaScript内置机制：AbortController #

是的，JavaScript提供了AbortController API，专门用来取消异步操作（包括fetch请求），能直接避免处理过期的请求结果，无需手动追踪状态。

用法示例：

let controller = null;

async function search(query) {
  // 取消之前未完成的请求
  if (controller) {
    controller.abort();
  }

  // 创建新的控制器
  controller = new AbortController();
  const signal = controller.signal;

  try {
    const result = await fetch(`/api?q=${query}`, { signal });
    const data = await result.json();
    display(data);
  } catch (err) {
    // 忽略请求被取消的错误
    if (err.name !== 'AbortError') {
      console.error('请求出错:', err);
    }
  }
}

这个方案的核心是每次发起新请求时，先取消上一个未完成的请求，从根源上杜绝了过期结果的产生，比手动追踪currentQuery更可靠。

其他替代方案 #

除了手动追踪标识符和AbortController，还有这些实用方法：

• 防抖（Debounce）：减少短时间内重复发起的请求，从根源上降低请求重叠的概率。比如设置300ms的防抖，用户停止输入300ms后才发起请求，避免频繁触发。

  function debounce(func, delay) {
    let timeoutId;
    return function(...args) {
      clearTimeout(timeoutId);
      timeoutId = setTimeout(() => func.apply(this, args), delay);
    };
  }
  
  // 包装search函数
  const debouncedSearch = debounce(search, 300);
  

• 框架内置的清理机制：如果使用React、Vue这类框架，可以利用它们的生命周期钩子清理未完成的请求。比如React的useEffect返回清理函数：

  import { useEffect, useState } from 'react';
  
  function SearchComponent() {
    const [query, setQuery] = useState('');
  
    useEffect(() => {
      const controller = new AbortController();
      const signal = controller.signal;
  
      async function fetchData() {
        try {
          const res = await fetch(`/api?q=${query}`, { signal });
          const data = await res.json();
          display(data);
        } catch (err) {
          if (err.name !== 'AbortError') throw err;
        }
      }
  
      if (query) fetchData();
  
      // 组件卸载或query变化时取消请求
      return () => controller.abort();
    }, [query]);
  
    return <input onChange={(e) => setQuery(e.target.value)} />;
  }
  

• 自定义请求管理类：封装一个专门处理请求取消的工具类，统一管理所有待处理的请求，比如给每个请求分配唯一ID，新请求发起时标记旧请求为过期，返回时检查状态再决定是否处理结果。

内容的提问来源于stack exchange，提问作者Anayo Samson Oleru