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

Posted 2023-02-21

【中文标题】React 中的悬念承诺何时执行？

【英文标题】：When is the promise executed for suspense in 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

【参考方案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() />