问题描述
我想调用三个 URL 并从 getServerSideProps() 呈现它们的数据，所以我使用 axios.all([]) 如下：
export async function getServerSideProps(ctx) {
const profileURL = 'http://localhost:8000/api/auth/profile/';
const bookmarkURL = 'http://localhost:8000/api/blogs/saved/';
const profileDataReq = axios({method: 'GET',url: profileURL,headers: ctx.req ? { cookie: ctx.req.headers.cookie } : undefined
});
const bookmarksReq = axios({method: 'GET',url: bookmarkURL,headers: ctx.req ? { cookie: ctx.req.headers.cookie } : undefined
});
const resp = await axios.all([profileDataReq,bookmarksReq]);
const data = axios.spread(function(profile,bookmark) {
console.log('My profile: ',Profile);
console.log('Saved blogs: ',saved);
})
return {
props: { }
};
};
我的问题是如何从 axios return{...} 返回 getServerSideProps() 数据以便我可以在组件中使用它？
解决方法
对于此用例，我建议您使用 A 而不是 Promise.all/axios.all。
axios.spread旁注： export async function getServerSideProps(ctx) {
const profileDataReq = axios({
method: 'GET',url: 'http://localhost:8000/api/auth/profile/',headers: { cookie: ctx.req.headers.cookie }
});
const bookmarksReq = axios({
method: 'GET',url: 'http://localhost:8000/api/blogs/saved/',headers: { cookie: ctx.req.headers.cookie }
});
const [profile,bookmarks] = await Promise.all([
profileDataReq,bookmarksReq
]);
return {
props: {
profile: profile.data,bookmarks: bookmarks.data
}
};
};
始终在 ctx.req 中定义。