Javascript:如何在使用 window.location.href = url 导航到的页面上捕获错误 [英] Javascript: How to catch error on page navigated to using window.location.href = url

问题描述

我正在使用 REST 服务生成一个 CSV 文件，我想提示用户下载该文件.服务示例如下:

I am using a REST service to generate a CSV file that I want to prompt the user to download. An example of the service is below:

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

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

To prompt the user to download the file, I use this code:

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

window.location.href = exportUrl, where exportUrl would be a URL like the one above.

如果在执行服务时服务器上没有错误，这很有效.出现文件下载提示，页面不刷新，一切正常.

This works great if there are no errors on the server when executing the service. The file download prompt appears, the page doesn't refresh, and all is well.

但是，如果有错误，我会得到一个讨厌的 HTTP 状态 500 页面，这对用户体验没有好处.我想做的是捕获结果页面上的任何错误，并在不离开当前页面的情况下抛出一个更友好的错误.我试过了:

However, if there is an error, I'm getting a nasty HTTP Status 500 page, which is no good for user experience. What I'd like to do is catch any error on the resulting page, and throw up a more friendly error without leaving the current page. I tried:

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

但这似乎根本没有改变行为.有没有人对如何处理这个问题有任何想法?

But that doesn't seem to change the behavior at all. Does anyone have any ideas on how to handle this?

非常感谢.

推荐答案

捕获这样的错误只会捕获 JavaScript 错误.这不是你在这里经历的.您的服务器正在返回 500 的状态代码.在将用户派往那里之前，您需要确保一切正常.

Catching an error like that will only catch a JavaScript error. That's not what you're experiencing here. Your server is returning a status code of 500. You need to make sure that everything is good BEFORE you send your users there.

为此，您可以使用 Ajax 有效地ping"该 URL，以确保它不会返回 500 错误.

To do that you could effectively 'ping' the URL with Ajax to ensure that it won't return a 500 error.

类似于以下内容:

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 请求，以确保没有等待的令人讨厌的服务器错误.

This would do a HEAD request to the URL to ensure that there are no nasty server errors waiting.

当然，如果在实际生成 CSV 的过程中，您的服务器抛出错误 - 它仍会返回 500.

Of course, if in the process of actually GENERATING the CSV your server throws an error - it would still return a 500.

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

A more robust way would be to get the data via Ajax, build a data URL via base64encode and then set window.location.href to that data URL.

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

By doing that, you could also ensure that the Ajax didn't return a 500 and you got the data you were expecting in the response.

希望这会有所帮助！

这篇关于Javascript:如何在使用 window.location.href = url 导航到的页面上捕获错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！