useRequest中的 staleTime与loadingDelay

[Harrison3098]

staleTime：

• 缓存数据保持新鲜时间。在该时间间隔内，认为数据是新鲜的，不会重新发请求
• 如果设置为 -1，则表示数据永远新鲜

设置为-1永不重新请求，或是设置为10分钟表示在10分钟内不发请求，但loading的状态则会一直保持为true除非请求完成。 我理解的loading应该是在请求发出但未响应时的loading，不应该包括在这里面

这个loading状态是不是不太对劲？还是我理解有误？

[liuyib]

@sagit-zhx 这是哪个 hook 的问题？useRequest? 可以给出能复现的在线 demo 吗？感谢

[Harrison3098]

是useRequest。我不清楚如何提供在线demo，但是我在codesandbox.io反复测试了一下

• 场景 在tabOne中进行异步请求成功并缓存，随后切换tabTwo再回tabOne，就会发现loading一直为true

• 结论如下： staleTime 与 loadingDelay 同时使用的时候，loading一直为ture直到staleTime的时间结束。或是禁用loadingDelay

测试代码如下

import { useRequest } from "ahooks";
import { useState } from "react";

export default function App() {
  const [currentTab, setCurrentTab] = useState(0);

  return (
    <div className="App">
      <button
        onClick={() => {
          setCurrentTab(currentTab + 1);
        }}
      >
        切换
      </button>
      {currentTab % 2 ? <TabTwo /> : <TabOne />}
    </div>
  );
}

const TabOne = () => {
  const request = () =>
    new Promise((resolve) => setTimeout(() => resolve("success!"), 5000));

  const { data, loading } = useRequest(request, {
    cacheKey: "try-to-update-text",
    cacheTime: -1,
    staleTime: -1,
    loadingDelay: 1, // 无论设置多大或者多小，都会让loading一直为true，除非禁用
  });

  return (
    <>
      <h1>This is Tab One</h1>
      <p>loading: {loading.toString()}</p>
      <p>text: {data}</p>
    </>
  );
};

const TabTwo = () => <h1>This is Tab Two</h1>;

[liuyib]

感谢反馈，在线 Demo 就是你提到的使用 codesandbox.io 这类网站，最好可以把分享链接直接贴出来。

[Harrison3098]

https://codesandbox.io/embed/quirky-feynman-dtdtvx?fontsize=14&hidenavigation=1&theme=dark 这个不知道可不可以

[liuyib]

看着是存在问题，感谢反馈哈 @sagit-zhx

[liuyib]

@crazylxr 见哥 有空了看看这个 ❤️

[wangping51]

我试试

[danaYatsuta]

Still happening in 3.9.6, I hope this can be fixed soon.