Angularjs 1.4拦截器无法正常工作

时间:2015-11-19 21:48:52

标签: javascript angularjs angular-http-interceptors

首先让我说我是一个有角度的菜鸟,所以我怀疑基于我缺乏理解而犯了一个非常愚蠢的错误。

我正在尝试创建拦截器来处理请求和响应错误。

如果我在文件的顶部放置一个警报,则会调用它,因此它正在加载文件。但是没有其他警报包括在文件底部和配置之前被调用。 responseError和requestError永远不会被调用...

我已经尝试将其简化为最小化以重现问题,我已经尝试了几个不同的示例,如果我使用过时的代码如何实现它,我尝试在控制器中注释掉错误子句以防万一它正在吞下这个例外.....我今天大部分时间用谷歌搜索试图让它发挥作用,我很难过。

    </head>
<body>
    <div class="Forum-Block">
        <div class="Top-Bar">
            <a href="http://site/Forum.php"><div class="Back-Box">Back</div></a>
            <a href="http://site/ShowFriends.php"><div class="FriendsB-Box">Friends</div></a>
            <a href="http://site/ShowSentRequests.php"><div class="RequestsB-Box">Sent Requests</div></a>
            <a href="http://site/AddFriend.php"><div class="SendRequestB-Box">Send Request</div></a>
        </div>
        <div class="FriendRequestSend-Box">
            <form method="post">
                <input type="text" name="friendname"/>
                <br/>
                <a href="http://site/AddFriendPHP.php" onclick="form.submit();"><div class="FriendRequestSend-Button">Send</div></a>
            </form>
        </div>
    </div>
</body>

任何帮助,尤其是对正在发生的事情有充分理解的人都非常感激

----回答后人的相关信息----

根据sbedulins和Angad的答案,我能够得到它 工作

首先,一旦我开始工作,它会在responeError和RequestError周围使用和不使用单引号...

dependency1和2未定义,并且我在这里得到了一个简化示例的剪切和粘贴错误。所以我删除了它们。

然后我用angular.module('defaultApp')替换了模块,所以模块是示例中的占位符,而不是某种方便的全局存储它...你需要明确定义你的模块,(或变量模块) (是的,我真的是有角度的新手)

所以一旦所有这些更改都应用于sbedulins示例,我在这里获得了两种方法的代码,因为这里的后处是我的应用程序中的actyual工作代码

$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');
}]);

OR

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

}]);

非常感谢你的帮助,我在例子中学到了关于角速记的重要事项。 sbedulin得到答案,即使我需要评论的帮助才能得到他/她的工作答案

1 个答案:

答案 0 :(得分: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');

}]);

或者,您可以按docs

中的定义推送匿名函数
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);
            }
        };
    });

}]);

使用此处描述的工作plunker disabling button while ajax request