0

我正在玩 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 就会启动，并且由于状态最初是挂起的，因此它引起了 loader 的悬念。

但现在我把根放在哪里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”的每个演示都会强制执行此操作。

4

1 回答 1

0

Ok, I found one answer from other libraries consumes this.

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);

So the fetch is wrapped inside a function () => {...}, and send to a hook , and it's up to this hook when is the right time to invoke it.

Therefore to answer the question, we need to define a wrapper as a handler.

  const fetchResource = () => {
    return fetchProfileData
  }

and then

function App() {
  if (isNotAllowed) return
  
  return <ProfilePage resource={fetchResource()} />
}
于 2021-07-27T20:35:09.637 回答