在angular $ http请求

时间:2015-07-14 22:14:02

标签: javascript angularjs

AngularJS中的第一个项目,我开始创建我的模块化服务(工厂)

angular.module('app.services.public', [])
    .factory('publicService', ['$http', function publicService($http) {
        var results = {};
        results.contact = function (name, email, message){
             return $http.get();
        };
        return results;
    }]);

然后我通过包含它来调用我的主要角度应用程序。当我打电话给它时,我需要倾听成功或错误

publicService.contact().success(callback).error(callback)

我的问题是,我将通过这些服务做很多API请求,并且似乎每次都会收听错误的错误代码,因为90%的时间它会做同样的事情。

如何围绕$http.get或围绕所有工厂调用创建包装器?

类似

apiCall = function (url, data, successCallback, errorCallback){
    $http.get(url,data).success(function(){
        successCallback()
    }).error(function(){
        if(errorCallback()){ errorCallback(); return; }
         // or display general error message
    })
}

3 个答案:

答案 0 :(得分:1)

你有正确的想法。您可以使用工厂轻松完成。

myApp.factory(APIService, function(publicService, $http) {
  return {

    // create methods in here
    ...

    contact: function(cb) {
      $http.get(url,data).success(cb).error(function(err){
        console.error('oh no!', err);
      });
    }
  };
});

然后您可以在控制器中使用它。

APIService.contact(function(data){
  console.log('response from the api!', data);
});

您甚至可以将错误处理程序移动到自己的工厂。

答案 1 :(得分:1)

我建议不要将基于 promise 的转换为基于回调的API。 Angular采用了承诺,最好与他们保持联系。 另外,请远离.success - 具体.error / .then并使用承诺.catch / $http API。

您需要多长时间才能投放网络来处理publicService错误?

1)说,它只适用于您的.factory("publicService", function($http, $q){ function handleError(){ // invokes error handlers } return { onError: function(cb){ // register error handlers }, doSomethingA: function(){ return $http.get("some/url/A") .then(function(response){ return response.data; }) .catch(function(error){ handleError(error); return $q.reject(error); // still "rethrow" the error } }, doSomethingB: function(){ // similar to above }, // etc... }; }) 服务,然后您可以在每个功能上“处理”它:

.controller("MainCtrl", function($scope, publicService){
   publicService.onError(function(error){
     $scope.showError = true; // or something like that
   })
})
.controller("FunctionACtrl", function($scope, publicService){
   publicService.doSomethingA()
                .then(function(data){
                  $scope.data = data;
                });
})

然后您可以将请求与错误处理分开:

publicService

2)当然,上述内容仅适用于通过$http提出的请求。如果要捕获所有$http错误,可以实现.factory("ErrorService", function(){ return { onError: function(cb){ // register error handlers }, broadcastError: function(error){ // invoke error handlers } }; }) 拦截器。我不会详细介绍 - Check Fiddle和其他地方有足够的信息 - 但它可以像下面这样工作:

ErrorService

然后在拦截器中,使用'responseError': function(rejection) { ErrorService.broadcastError(rejection); return $q.reject(rejection); } 作为依赖:

.controller("MainCtrl", function($scope, ErrorService){
   ErrorService.onError(function(error){
     $scope.showError = true; // or something like that
   })
})

然后你可以全局处理错误:

from pandas import DataFrame as df

th = 25

d = df(['file_0', 'file_1', 'file_2', 
         'file_3', 'file_4', 'file_5', 
         'file_6', 'file_7', 'file_8', 
         'file_9'],
         [2,21,20,16,12,67,95,16,2,5])

x = d.loc[d.index < th]
x = x.loc[x.index == max(x.index)]
print x

答案 2 :(得分:1)

我建议使用angular $q服务实现。

angular.module('app.services.public', [])
    .factory('publicService', ['$http', '$q', function publicService($http, $q) {
        var results = {};
        results.contact = function (name, email, message){
             return $q.when($http.get());
        };
        return results;
    }]);

或者不是使用$q.when(...)方法,您可以使用$q.deferred,如下所示:

angular.module('app.services.public', [])
        .factory('publicService', ['$http', '$q', function publicService($http, $q) {
            var deferred = $q.deferred();
            var results = {};
            results.contact = function (name, email, message){
                 $http.get().success(function(data){
                      deferred.resolve({
                         // assumes data retried from http request has a title and price attribute
                         title: data.title,
                         cost: data.price});
                 }).error(function(data){
                       deferred.reject(data);
                 });
            };
            return deferred.promise;
        }]);