等待 window.location.href？答案

【问题标题】：Await window.location.href?等待 window.location.href？
【发布时间】：2018-11-16 09:28:00
【问题描述】：

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

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

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

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

export = () => {

    this.setState({loading:true});

    window.location.href = "url";

    this.setState({loading:false});

}

【问题讨论】：

this.setState({false}); 不会被调用，因为设置 url 会重新加载页面
另外，setState 并不是真正同步的，很多时候 react 会批量处理 setState 操作，因此执行并没有真正按照您现在的想法进行。
@Liam - 这取决于响应。如果响应发送Content-Disposition: attachment，它很可能只是触发下载对话框而不替换当前页面。
真实数据@T.J.Crowder
我猜 ajax+FileSaver.js 是您需要的解决方案。如果您的数据太大，您还可以使用 StreamSaver.js。如果这对您来说似乎是一个好的解决方案，我可以稍后再写一个答案。

标签： javascript reactjs api csv export-to-csv

【解决方案1】：

如果页面将被 csv 替换...

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

如果页面要保留在原地...

...那么我这样做的方式是有一个 cookie 告诉我是否收到了响应：

确保未设置 cookie。
确保响应发送 cookie。
在主页中使用计时器循环查找 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 中，清除该间隔计时器。

【讨论】：