$http 请求的后台处理通知

Question

我正在寻找一种方法来 "wrap" 所有 $http 请求，这样我就可以在应用程序进行某些处理时显示 gif 图像。我还想对其他类型的后台处理使用相同的解决方案，而不仅仅是 $http.

我问的原因是我总是必须将我的 processingIndicator 设置为 true 然后再切换回我的 success 函数，这一点也不优雅。

我看到的一个可能的解决方案是使用将函数作为参数的函数。此函数会将 processingIndicator 设置为 true，调用该函数，然后将 processingIndicator 设置回 `false。

function processAjaxRequestSuccessFn(fooFn){
  // display processing indicator
  fooFn();
  // hide processing indicator
}

然后

$http.get(...).then(processAjaxRequestSuccessFn, processAjaxRequestErrorFn)

这个解决方案不是很方便，因为每次我需要通知用户有事情发生时，我都需要使用这个功能。

我正在寻找一种自动化此过程的方法。

还有其他想法吗？

稍后编辑

我的另一个想法是用我自己的 get、post 等扩展 $http，或者创建具有类似行为的自定义服务。但是还是不太优雅。

Answer 1

我已成功地使用 AngularOverlay 在 HTTP 请求挂起时显示加载指示器。下载文件并按照说明进行操作，它应该可以工作。

Answer 2

使用拦截器。观察下面的例子...

app.factory('HttpInterceptor', ['$q', function ($q) {
    return {
        'request': function (config) {
            /*...*/
            return config || $q.when(config);   // -- start request/show gif
        },
        'requestError': function (rejection) {
            /*...*/
            return $q.reject(rejection);
        },
        'response': function (response) {       // -- end request/hide gif
            /*...*/
            return response || $q.when(response);
        },
        'responseError': function (rejection) {
            /*...*/
            return $q.reject(rejection);
        }
    };
}]);

app.config(['$httpProvider', function ($httpProvider) {
    $httpProvider.interceptors.push('HttpInterceptor');
    /*...*/
}]);

在这里，您可以在 http 请求生命周期的各个点注入集中式逻辑，挂接到 api 提供的回调中。制作您可能需要的任何可重用请求逻辑 - 只需在此处执行即可。查看 AngularJS $http docs 的拦截器部分了解更多信息。

$http 请求的后台处理通知

background processing notification for $http requests

javascript

ajax

angularjs

angularjs-service