React中如何控制数据请求的优先级？

Zz仪凡提问于 2026-03-04 17:34:25 阅读 6

优化

我在用React做搜索功能，用户频繁输入时会触发多次请求，旧的请求结果反而覆盖了新的，怎么让新请求优先、取消旧的？

试过用AbortController，但不确定是不是用对了，代码大概是这样：

useEffect(() => {
  const controller = new AbortController();
  fetch(<code>/search?q=${query}</code>, { signal: controller.signal })
    .then(res => res.json())
    .then(data => setResult(data));
  return () => controller.abort();
}, [query]);

我来解答赞 4 收藏

反馈

1 条解答

萌新.瑞腾 Lv1

AbortController 用法没问题，但关键在于错误处理。fetch 被取消时会抛出一个 AbortError，如果不捕获，有时候会打断后续逻辑或者控制台报错。用 async/await 包一下，加个 try-catch 判断一下错误类型就行了。

useEffect(() => {

  const controller = new AbortController();



  const fetchData = async () => {

    try {

      const res = await fetch(/search?q=${query}, { signal: controller.signal });

      const data = await res.json();

      setResult(data);

    } catch (err) {

      // 只有当错误不是 'AbortError' 时才处理，忽略取消请求导致的报错

      if (err.name !== 'AbortError') {

        console.error('请求失败:', err);

      }

    }

  };



  fetchData();



  return () => {

    controller.abort();

  };

}, [query]);

这样写，新请求来的时候，cleanup 函数先执行，把上一个请求掐断，只有最新的请求能走到 setResult。如果不想用 AbortController，搞个 local 变量做标志位也行，但 AbortController 更省带宽，推荐这个。

2026-03-04 17:35