【jQuery】$.ajax() で失敗時に常に実行したい処理があるとき

Tweet

Category JavaScript / Tagged jQuery 2019/12/17

問題

$.ajax() でリクエストして、HTTPステータス401や404や500番台が返ってきたとき、常にある処理をしたいのですが。

答え

Global Ajax Event Handlers の .ajaxError() に関数を登録しておくとよい。

$( document ).ajaxError(function() {
    //.fail の時、常にやりたいことを登録
    alert("HTTPステータス200以外みたいだよ！");
});

以下のような場合 .ajaxError が呼ばれる。

$.ajax({url: '存在しないURL'}); // 404 Not Found
$.ajax({url: 'ベーシック認証が設定されているURL'}); // 401 Unauthorized
$.ajax({url: 'ログインしていないシステム画面'}); // システムが400番台、500番台を返せば
$.ajax({url: 'エラーが発生する処理'}); // 500 Internal Server Error など

なお、 $.ajax({～}).fail(～) では上書きはされない。両方実行される。

$( document ).ajaxError(function() {
    console.log('ajaxErrorだよ！');
});

$.ajax({
    url: 'エラーが発生するURL'
}).fail(function(){
    console.log("failだよ！");
    // .fail実行後、ajaxErrorのグローバルイベントが発火して、.ajaxError() が実行される
});

例外的に .ajaxError を実行したくない場合は、$.ajax() の global オプションを false にしておくとよい。

$( document ).ajaxError(function(x) {
    console.log(x);
});

$.ajax({
    url: 'エラーが発生するURL',
    global: false
}).fail(function(){
    console.log("こちらは実行されるが、.ajaxError() は呼ばれない。");
});