reactjs - 如果我想从 api 调用 react 返回响应，我应该在返回中添加什么？

Question

我需要在我的 api 调用中添加标头。我尝试了很多不同的方法都无济于事。这是我没有标题的原始 api 调用：

export default async function FetchPageMarkdown(page: string): Promise<string> {
    const baseUrl = getBackendUrl();
    let response = await fetch(`${baseUrl}/api/pagemarkdown/${page}`);
    let text = await response.text();

    return text
}

这就是我尝试添加标题的方式：

const FetchPageMarkdown = (page: string): Promise<string> => {

  const { getAccessTokenSilently } = useAuth0();

  const callSecureApi = async () => {

    const token = await getAccessTokenSilently();
    const baseUrl = getBackendUrl();
    const response = await fetch(
      `${baseUrl}/api/pagemarkdown/${page}`,
      {
        headers: {
          Authorization: `Bearer ${token}`,
        },
      }
    );

    const text = await response.text();
    return text;
  }

};

export default FetchPageMarkdown;

在没有返回的情况下，我得到一个声明类型既不是“void”也不是“any”的函数必须返回一个值。我想返回来自markdown api调用的文本。如果我将 return 放在 callSecureApi 函数之外，它将找不到文本。

标签： reactjsheaderreact-hooksfetchauth0

Answer 1

您是否尝试过调用并返回异步函数的结果，即return callSecureApi();？

由于useAuth0它是一个 React 钩子，它不能从函数中调用（违反钩子规则），但它的getAccessTokenSilently函数可以被传递。

const fetchPageMarkdown = (getAccessTokenSilently: () => string, page: string): Promise<string> => {
  const callSecureApi = async () => {
    const token = await getAccessTokenSilently();
    const baseUrl = getBackendUrl();
    const response = await fetch(
      `${baseUrl}/api/pagemarkdown/${page}`,
      {
        headers: {
          Authorization: `Bearer ${token}`,
        },
      }
    );

    const text = await response.text();
    return text;
  }

  return callSecureApi(); // invoke and return Promise
};

用法：

const { getAccessTokenSilently } = useAuth0();

fetchPageMarkdown(getAccessTokenSilently, page)
  .then(text => {
    // handle returned text
  });