Angular JS - 监听或绑定$ http请求

时间:2015-03-02 06:37:47

标签: javascript angularjs

是否有办法在每次有$ http请求时以及收到回复后收听/绑定事件?

其实我已经通过提供我自己的活动和听众来手动完成它,但我只是好奇是否已经是Angular JS中的监听者?

我想要这样做的原因是,每当我的应用程序发送/执行$ http请求时,我想显示我的加载屏幕以指示应用程序正在检索数据,然后在收到响应后隐藏它。 / p>

谢谢!

3 个答案:

答案 0 :(得分:2)

您可以使用interceptor执行此操作

var httpinterceptor = function ($q, $location) {
    return {
        request: function (config) {
            //show your loading message
            console.log(config);
            return config;
        },

        response: function (result) {
            //hide your loading message
            console.log('Repos:', result);
            return result;
        },

        responseError: function (rejection) {
            //hide your loading message
            console.log('Failed with', rejection);
            return $q.reject(rejection);
        }
    }
};

app.config(function ($httpProvider) {
    $httpProvider.interceptors.push(httpinterceptor);
});

演示:Fiddle

答案 1 :(得分:1)

上面已经有一个模块,您可以根据所需的格式使用并修改它angular-loading-bar

答案 2 :(得分:1)

您可以使用Angular Loading Bar。它通过使用角度拦截器自动化加载条的进度。同一时间段内的多个请求捆绑在一起,以便每个响应以适当的数量递增进度条。

    app.config(['cfpLoadingBarProvider', function(cfpLoadingBarProvider) {
        cfpLoadingBarProvider.includeSpinner = false; // second boot loader, you can show or hide
        cfpLoadingBarProvider.includeBar = true; // main loader
        cfpLoadingBarProvider.latencyThreshold = 200; // delay
    }])

希望这会有所帮助...