React Suspense 时间限制

【问题标题】：React Suspense time limitReact Suspense 时间限制
【发布时间】：2022-08-04 02:35:04
【问题描述】：

伙计们！我对 React 中的 Suspense 概念相对较新，所以如果问题答案很明显，我很抱歉，但我无法找到之前提出的类似问题。

所以我想知道如何设置/模拟 Suspense 的时间限制。假设我有一个 API 在 5 秒后返回一个简单的 JSON，并且我希望 Suspense 最多等待 3 秒然后显示某种错误组件“超出时间限制”？

顺便提一下 - 我正在使用 SWR 获取数据。

先感谢您！

标签： swr react-suspense time-limiting

【解决方案1】：

我尝试使用loadingTimeout 选项和onLoadingSlow 回调，但由于某种原因，当suspense: true 时它不会触发。也许这是一个错误。

另一种可能的解决方案是使用axios 之类的方法来获取数据，它具有timeout 选项，因此您可以指定此时间限制，之后axios 将抛出错误。不要忘记禁用 swrs shouldRetryOnError 选项。

  const { data } = useSWR(
    `https://jsonplaceholder.typicode.com/posts/${post}`,
    // Use whatever timeout you need
    (url) => axios.get(url, { timeout: 5000 }),
    {
      suspense: true,
      shouldRetryOnError: false
    }
  );

【讨论】：