2

私はAngularの初心者だと言って始めましょう。私の理解不足に基づいて、非常にばかげた間違いを疑っています。

リクエストとレスポンスのエラーを処理するインターセプターを作成しようとしています。

ファイルの先頭にアラートを配置すると、それが呼び出されるため、ファイルがロードされます。ただし、ファイルの下部や構成が呼び出される前を含む他のアラートはありません。responseError と requestError が呼び出されることはありません...

問題を再現する最小限まで単純化してみました。古いコードを使用している場合に備えて、実装方法についていくつかの異なる例を試しました。例外.....私はこれを機能させようとして一日のほとんどをグーグルで検索しましたが、困惑しています。

$provide.factory('myHttpInterceptor', function ($q, dependency1, dependency2) {
    return {
        'responseError': function (rejection) {
            alert("Something went wrong");
            return $q.reject(rejection);
        },
        'requestError': function (rejection) {
        alert("Something went wrong");
        return $q.reject(rejection);
    }
    };
});
alert('myHttpInterceptor done');
module.config(['$httpProvider', function ($httpProvider) {
    alert('myHttpInterceptor push');
    $httpProvider.interceptors.push('myHttpInterceptor');
}]);

特に何が起こっているのかをしっかりと理解するための助けをいただければ幸いです

----後世のための回答関連情報----

sbedulins と Angad の回答の組み合わせに基づいて、私はそれを機能させることができました。

最初に、私がそれを機能させたら、responeErrorとRequestErrorを一重引用符で囲んでも付けなくても機能しました...

依存関係 1 と 2 は定義されておらず、簡単な例からカット アンド ペースト エラーが発生しました。だから私はそれらを削除しました。

次に、モジュールを angular.module('defaultApp') に置き換えたので、モジュールは例のプレースホルダーであり、それを格納する便利なグローバルではありません...モジュール (または変数モジュール) を明示的に定義する必要があります (はい、私は本当に角度が初めてです）

これらの変更がすべて sbedulins の例に適用されると、両方のアプローチで動作するコードがここに表示されます。

angular.module('defaultApp').config(['$provide', '$httpProvider', function ($provide, $httpProvider) {

    $provide.factory('myHttpInterceptor', function ($q) {
        return {
            responseError: function (rejection) {
                alert("Something went wrong");
                return $q.reject(rejection);
            },
            requestError: function (rejection) {
                alert("Something went wrong");
                return $q.reject(rejection);
            }
        };
    });

    $httpProvider.interceptors.push('myHttpInterceptor');

}]);

また

angular.module('defaultApp').config(['$httpProvider', function ($httpProvider) {

    $httpProvider.interceptors.push(function ( $q ) {
        return {
            'responseError': function (rejection) {
                alert("Something went wrong");
                return $q.reject(rejection);
            },
            'requestError': function (rejection) {
                alert("Something went wrong");
                return $q.reject(rejection);
            }
        };
    });

}]);

皆様のご協力に感謝いたします。サンプルでAngularの略記について重要なことを学びました。彼/彼女の答えを機能させるにはコメントの助けが必要ですが、sbedulinは答えを得ます

4

1 に答える 1

2

インターセプター経由は、プッシュする直前$provideのフェーズで定義する必要がありますconfig$httpProvider.interceptors

module.config(['$provide', '$httpProvider', function ($provide, $httpProvider) {

    $provide.factory('myHttpInterceptor', function ($q, dependency1, dependency2) {
        return {
            'responseError': function (rejection) {
                alert("Something went wrong");
                return $q.reject(rejection);
            },
            'requestError': function (rejection) {
                alert("Something went wrong");
                return $q.reject(rejection);
            }
        };
    });

    $httpProvider.interceptors.push('myHttpInterceptor');

}]);

または、ドキュメントで定義されている匿名関数をプッシュすることもできます

module.config(['$httpProvider', function ($httpProvider) {

    $httpProvider.interceptors.push(function ($q, dependency1, dependency2){
        return {
            'responseError': function (rejection) {
                alert("Something went wrong");
                return $q.reject(rejection);
            },
            'requestError': function (rejection) {
                alert("Something went wrong");
                return $q.reject(rejection);
            }
        };
    });

}]);

ajaxリクエスト中にボタンを無効にする、ここで説明されている動作中のプランカーを使用したユースケース

于 2015-11-19T22:34:27.533 に答える