无法从 getServerSideProps 返回 axios.all 数据

Posted 2023-03-30

【中文标题】无法从 getServerSideProps 返回 axios.all 数据

【英文标题】：Can't return axios.all data from getServerSideProps

【发布时间】：2021-06-24 05:30:31

【问题描述】：

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

【参考方案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 中定义。

【讨论】：

太好了，效果很好。但是Promise.all() 在这里是如何工作的呢？

profileDataReq 和 bookmarksReq 都是 Promise，我们只需使用 Promise.all 等待两者都解决（或其中一个拒绝）。如果 Promise 被拒绝，您可能需要进行额外检查。