等待window.location.href？

Question

所以这可能是一个奇怪的场景，但我有一个端点（GET，返回CSV），我使用window.location.href =“URL”调用它。由于数据负载繁重，此调用可能需要一些时间，因此我希望在页面上显示加载微调器。

（使用React） 在onClick函数的开头，我将加载微调器的状态设置为true，调用window.location.href，然后将状态设置为false。

我已尽力而为，但是一旦api完成，我无法让微调器正确加载和隐藏。我已经尝试将它包装在一个承诺中并尝试。然后但仍然没有运气。

有什么想法吗？我正在尝试做这样的事情：

export = () => {

    this.setState({loading:true});

    window.location.href = "url";

    this.setState({loading:false});

}

Answer 1

如果页面将被csv ...

替换

...然后只修复错字（你有loaction而不是location）并删除this.setState({false})（这也是一个错字，但你不想要）。可能会启动微调器，最终页面将替换为CSV。

如果页面仍然存在......

...然后我这样做的方法是让一个cookie告诉我是否收到了回复：

1. 确保未设置Cookie。
2. 确保响应发送cookie。
3. 在主页面中使用定时器循环查找cookie值。

所以在你的情况下，有些东西：

export = () => {
    this.setState({loading:true});
    this.clearTheCookieValue();
    window.location.href = "url";
    this.cookieWatchTimer = setInterval(() => {
        if (/*the cookie value has now been set*/) {
            clearInterval(this.cookieWatchTimer);
            this.cookieWatchTimer = 0;
            this.setState({loading: fals});
        }
    });
}

...并在componentWillUnmount中，清除间隔计时器。