如何从"await fetch()"解析承诺？

Question

我有一个用户详细信息页面组件。我想调用fetchApiReponse((方法，其中有一个代码用于从api中获取外部数据；等待获取(("；。

如何解析该响应并将结果返回到组件？我不想用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

Answer 1

我是如何解决的：

我已经将我的代码从fetchApiResponse((函数移到了getServerSideProps((，然后我将json响应传递到了{props{..}｝，现在我不必处理Promises和解析Promise，它工作得很好。

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

Answer 2

两件事，其中一件已经在Yousaf的评论中提到：

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

您需要await res.json()，因为res.json()和fetch一样是一个promise。等待是在进入下一个代码块之前解决承诺的方法。(至少我是这么理解的(

另一件事是在代码的第一部分。

const sku = await useRouter().query.sku;

这可能是

const sku = (await useRouter()).query.sku;

至少根据我的经验，我在尝试访问wait Promise的属性时遇到了问题。在我看来，它会试图访问函数返回(Promise(的属性，而不是我真正想要获得的值。

当然，这可能完全是我自己，我的处境，我不知道幕后到底发生了什么。所以，在最后一部分要谨慎对待。