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

Angular JS - listen or bind $http request

本文关键字:http 请求 绑定 JS- Angular      更新时间:2023-09-26

有没有一种方法可以在每次出现$http请求以及收到响应后侦听/绑定事件?

事实上,我已经通过提供自己的事件和监听器手动完成了这项工作,但我只是好奇Angular JS中是否已经有了监听器?

我之所以想这样做,是因为每次我的应用程序发送/执行$http请求时,我都想显示我的加载屏幕,以指示应用程序正在检索数据,然后在收到响应后将其隐藏。

谢谢!

您可以使用拦截器来执行此

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

上面已经有一个模块,您可以根据需要使用和修改它。检查这个角度加载条

您可以使用角度加载栏。它通过使用角度拦截器来自动化加载条的进程。同一时间段内的多个请求被捆绑在一起,这样每个响应都会将进度条增加适当的数量。

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

希望这能帮助。。。