JavaScript：如何在使用window.location.href = url导航到页面时捕获错误

Question

我正在使用REST服务生成一个CSV文件，并希望提示用户进行下载。以下是该服务的示例：

https://localhost:8444/websvc/exportCSV?viewId=93282392

为了提示用户下载文件，我使用以下代码：

window.location.href = exportUrl，其中exportUrl是类似上面的URL。

如果执行服务时没有任何错误，这个方法非常有效。文件下载提示会出现，页面不会刷新，一切都很好。

但是，如果有错误，则会出现令人难以接受的HTTP状态500页面，这对用户体验来说并不好。我想做的是捕获结果页面上的任何错误，并弹出更友好的错误提示而不离开当前页面。我尝试过：

try {
    window.location.href = exportUrl;
}
catch (e) {
    alert(e);
}

但这似乎并没有改变行为。有人对如何处理此事有什么想法吗？

非常感谢。

- Matt

Answer 1

捕捉这样的错误只能捕捉到JavaScript错误，但这不是你在这里遇到的问题。你的服务器返回了一个状态码 500，你需要确保在向用户发送请求之前一切都正常。

为了做到这一点，你可以使用Ajax有效地“ping”该URL，以确保它不会返回500错误。

代码示例:

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function() {
    if(xhr.readyState == 4 && xhr.status == 200) {
        window.location.href = exportUrl;
    }
}

xhr.open('head',exportUrl);
xhr.send(null);

这将向URL发送HEAD请求，以确保没有任何恶意服务器错误等待。

当然，如果在实际生成CSV的过程中，您的服务器出现错误，它仍将返回500。

更健壮的方法是通过Ajax获取数据，使用base64encode构建数据URL，然后将window.location.href设置为该数据URL。

通过这样做，您还可以确保Ajax未返回500，并且您获得了预期在响应中的数据。

希望这有所帮助！

- daniel0mullins

---

非常感谢您的帮助。在等待答案期间，我决定做类似的事情。现在我正在使用$.get()来访问URL，然后在done()函数中放置window.location.href代码。在fail()函数中，我会抛出一个友好的错误，表示文件生成失败。这很有效，但这意味着需要向服务器发送两个完整的请求，这个我不太喜欢。需要注意的是，错误肯定是在CSV生成过程中发生的，因此我对您提出的第二种“更加健壮”的想法很感兴趣。您能否详细说明如何使用base64encode构建数据URL？谢谢。 - Matt

@MattPowell 你找到解决办法了吗？（仅需一次服务器请求） - IceWhisper

嗨@IceWhisper - 不好意思，我从来没有这样做过。在我的情况下，两个服务器请求是可以接受的，但如果我需要一个单一的服务器请求，我会使用base64encode数据URL。 - Matt