React 中的悬念承诺何时执行？答案

【问题标题】：When is the promise executed for suspense in React?React 中的悬念承诺何时执行？
【发布时间】：2021-10-03 15:46:32
【问题描述】：

我正在玩 React 悬念示例。一切对我来说都是有意义的，除了我不知道如何隐藏承诺以防止执行。

export function fetchProfileData() {
  let userPromise = fetchUser();
  return {
    user: wrapPromise(userPromise),
  };
}


function wrapPromise(promise) {
  let status = "pending";
  let result;
  let suspender = promise.then(
    (r) => {
      status = "success";
      result = r;
    },
    (e) => {
      status = "error";
      result = e;
    }
  );
  return {
    read() {
      if (status === "pending") {
        throw suspender;
      } else if (status === "error") {
        throw result;
      } else if (status === "success") {
        return result;
      }
    }
  };
}

在他们的示例中，每当调用 fetchProfileData 时，promise 就会启动，并且由于状态最初是挂起的，因此它引起了加载程序的悬念。

但是现在我把根ProfileDetails放在哪里。

import { fetchProfileData } from "./fakeApi";

const resource = fetchProfileData();

function ProfilePage() {
  return (
    <Suspense
      fallback={<h1>Loading profile...</h1>}
    >
      <ProfileDetails />
    </Suspense>
  );
}

假设我有一个应用程序，我只是这样做

function App() {
  return <ProfilePage />
}

我的问题是，什么时候在 React 中执行承诺？在我启动页面之后？如果是这种情况，我该如何防止它被执行。如果我不允许看到该页面。我要执行以下操作吗？

function App() {
  if (notAllowed) return
  return <ProfilePage />
}

这会奏效吗？我有严重的疑问。请帮忙。

在文档中有这一行，但我不知道这是什么意思。

作为数据获取库的作者，您可以强制执行此操作，方法是在不启动获取的情况下无法获取资源对象。此页面上使用我们的“假 API”的每个演示都会强制执行此操作。

【问题讨论】：

您在代码中哪里使用了resource 变量？还是这个问题？
"promise 何时执行" - 在您当前的代码中，只要您调用 fetchProfileData()，即加载模块时，就会发出 fetch 请求
@Bergi，你是对的！我很好奇如何防止它调用:) 如果由于某种原因我不想在某些条件下使用 API。
据我了解，React 和experiment from React 16 is outdated 目前根本不支持数据加载Suspense。但是，如果这是您使用的代码，他们有 an example of putting a "resource" (on which to suspend) in the component state

标签： reactjs promise react-suspense

【解决方案1】：

好的，我发现其他库的一个答案消耗了这个。

import { useAsyncResource } from 'use-async-resource';

const fetchUser = (id: number) => fetch(`.../get/user/by/${id}`).then(res => res.json());

function App() {
  const [userReader, getNewUser] = useAsyncResource(fetchUser, 1);

所以fetch 被包装在一个函数() => {...} 中，并发送到一个钩子，而何时调用它取决于这个钩子。

因此，要回答这个问题，我们需要将包装器定义为处理程序。

  const fetchResource = () => {
    return fetchProfileData
  }

然后

function App() {
  if (isNotAllowed) return
  
  return <ProfilePage resource={fetchResource()} />
}

【讨论】：