无法从 getServerSideProps 返回 axios.all 数据

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: {   }
    };
};

我的问题是如何从getServerSideProps() 的return{...} 返回axios 数据，以便在组件中使用它？

Answer 1

对于这个用例，我建议您使用Promise.all 而不是axios.all/axios.spread（他们一直是deprecated）。

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 始终在 getServerSideProps 中定义。