Question

我想调用三个 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() 数据以便我可以在组件中使用它？

Answer 1

对于此用例，我建议您使用 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 中定义。

Next.js：无法从 getServerSideProps 返回 axios.all([...]) 数据

1 个答案: