Javascript 在页面呈现之前，从API响应中预加载内容

我目前正在构建一个包含菜单的web应用程序。菜单可以根据几个变量进行更改，因此我调用了一个api，以请求应该显示的正确菜单项

server.get('/api/getMenu', (req, res) => {
    getMenu((err, content) => {
        if(!err) {
            res.send(content);
        } else {
            res.status(500).send();
        }
    })
});

这个请求工作得非常好，然后我将发送一个操作，在componentWillMount上调用这个API

export function fetchMenuItems() {
    return (dispatch) => {
        fetch('/api/getMenu')
            .then((response) => {
                if (!response.ok) {
                    throw Error(response.statusText);
                }

                return response;
            })
            .then((response) => response.json())
            .then((results) => dispatch(fetchSuccess(results)))
    }
}

export function fetchSuccess(results) {
    return {
        type: 'FETCH_SUCCESS',
        menuItems: results
    };
}

这同样可以很好地工作并加载菜单项，但是它看起来很奇怪，因为在页面的其余部分已经加载之后，菜单项似乎在页面上呈现（我假设是由于请求需要多长时间）

---

在整个页面实际呈现之前，有没有办法预加载菜单项？我听说过承诺，但对承诺知之甚少，这可能是一个解决方案吗

我假设您正在寻找组件willmount-react生命周期方法

componentWillMount

将仅在第一次呈现组件之前调用一次。这是放置任何预加载数据逻辑的完美位置

---

希望这能有所帮助。

这是我目前正在做的事情，但是在页面的大量内容之后，项目仍然会加载，因为这是一个异步操作。我的问题是如何在页面加载之前运行此异步操作，以便菜单项已经加载。在这种情况下，我建议您尝试rxjs的CombineTest api：