如何从 Next.js 中的 WP REST API 获取响应标头？

Question

我正在使用 Isomorphic unfetch 从 Next.js 中的 WP REST API 获取一些数据，我如何获取响应标头？

import fetch from 'isomorphic-unfetch';

class Blog extends React.Component {
    static async getInitialProps() {
        const res = await fetch('https://wordpress.org/news/wp-json/wp/v2/posts');
        const data = await res.json();
        return { 
            res: res,
            data: data
        };
    }

    render() {
        console.log(this.props.res)
        console.log(this.props.data)
        return (
            <h1>Blog</h1>
        )
    }
}

我在控制台 中看不到任何可用的内容@

但是当我在浏览器 中打开url 时，标题就在那里

Answer 1

res.headers 将根据this 返回所有标题。您可以使用 res.headers.get('x-wp-total') 获取值，然后在 getInialProps 函数中返回它。

import fetch from 'isomorphic-unfetch';

class Blog extends React.Component {
    static async getInitialProps() {
        const res = await fetch('https://wordpress.org/news/wp-json/wp/v2/posts');
        const data = await res.json();
        return { 
            res: res,
            data: data,
            wpTotal: res.headers.get('x-wp-total')
        };
    }

    render() {
        console.log(this.props.wpTotal)
        console.log(this.props.data)
        return (
            <h1>Blog</h1>
        )
    }
}