如何从“await fetch()”解析 Promise？

Posted 2023-03-30

【中文标题】如何从“await fetch()”解析 Promise？

【英文标题】：How to parse a Promise from "await fetch()"?

【发布时间】：2021-09-12 12:24:18

【问题描述】：

我有一个用户详细信息页面组件。我想调用 fetchApiReponse() 方法，其中有一个代码用于从 api 获取外部数据，使用“await fetch()”。

如何解析该响应并将结果返回给组件？我不想使用 getStaticProps() 执行此操作，因为我将从 url 获取 userId 并将 ti 添加到 api 调用 url。

这是我的代码：

export async function fetchApiResponse() 
  const sku = await useRouter().query.sku;
  const url = `https://jsonplaceholder.typicode.com/users?id=1`;
  console.log(url);

  const res = await fetch(url);
  const data = res.json();

  return data;

组件文件：

export default function UserDetailPage(params) 
    const user = fetchApiUser();

    return (
        <>
            <h3>user.name</h3>
        </>
    );

很遗憾，上面的那段代码不起作用。它说 res.json() 的结果是一个 Promise

【问题讨论】：

const data = await res.json(); 但这仍然会让你的user 成为一个承诺......

您需要等待对fetchApiResponse 函数的调用，因为它返回一个promise。 fetchApiResponse 函数返回的 Promise 将根据 res.json() 返回的 Promise 发生的情况来实现或拒绝。

我已将代码从 fetchApiResponse 函数移至 getServerSideProps，然后将 json 响应传递给 props .. ，现在我不必解析 Promise，它工作正常。

【参考方案1】：

我是如何解决的：

我已将代码从 fetchApiResponse() 函数移至 getServerSideProps()，然后将 json 响应传递给 props .. ，现在我不必处理 Promise 并解析 Promise，它工作正常。

但是是的，我仍然想知道如何解析 Promise 结果以及如何处理它。