web-dev-qa-db-ja.com

Javascript：window.location.href = urlを使用してナビゲートされたページでエラーをキャッチする方法

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);
}

しかし、それは動作をまったく変えないようです。誰かがこれを処理する方法について何かアイデアがありますか？

どうもありがとう。

javascripterror-handlingtry-catchwindow.location
16
MegaMatt

そのようなエラーをキャッチすると、JavaScriptエラーのみがキャッチされます。それはあなたがここで経験していることではありません。サーバーが500のステータスコードを返しています。ユーザーをそこに送る前に、すべてが良好であることを確認する必要があります。

これを行うには、AjaxでURLを効果的に「ping」して、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を返さず、応答で期待したデータを取得できるようにすることもできます。

お役に立てれば！

8
daniel0mullins