如何在角度js中编写服务器错误和成功的全局函数

时间:2016-02-01 10:58:13

标签: javascript angularjs server global

我有一些单独的功能,如提交,更新,删除。所有功能

$http[method](url)
   .then(function(response) {
           $scope.successMessage = true;
} , function(response) {
          $scope.errorMessageWrong=true;
});

HTML

<p ng-show="successMessage">Success</p>
<p ng-show="errorMessageWrong"> Something went wrong </p>

有关单独的功能。我需要显示相应的消息。但我不想重复更新,删除和提交代码,甚至为执行相同操作的其他页面重复相同的操作。 如何创建名为errorHandler的函数。这样我就可以重复使用它。
任何人都可以帮助我

3 个答案:

答案 0 :(得分:1)

  

如何创建名为errorHandler的函数或其他东西。所以我可以重复使用它。

通过返回为已完成的数据响应和投掷拒绝的错误响应创建可链接承诺。

下面的示例函数将httpPromise作为参数,在$ scope上放置成功或错误消息,并返回适合链接的承诺。

function errorHandler(httpPromise) {
    var derivedPromise = httpPromise
       .then(function onFulfilled(response) {
                 $scope.successMessage = true;
                 //return response for chaining
                 return response;
            },
            function onRejected(errorResponse) {
                 $scope.errorMessageWrong = true;
                 //throw error to chain rejection
                 throw errorResponse;
            });
    //return derivedPromise for chaining
    return derivedResponse;
};

然后在客户端代码中:

var httpPromise = $http[method](url);

errorHandler(httpPromise).then( function (response) {
    //use data
});

客户端代码保存来自$http服务调用的httpPromise,使用errorHandler函数处理promise,并使用errorHandler函数返回的派生promise。

因为调用promise的then方法会返回一个新的派生promise,所以很容易创建一个promise链。可以创建任何长度的链,并且由于可以使用另一个承诺(将进一步推迟其解析)来解决承诺,因此可以在链中的任何点暂停/推迟承诺的解析。这使得实现强大的API成为可能。 1

答案 1 :(得分:1)

如果您希望它对您的应用程序是全局的,那么您可以使用httpInterceptor。

您必须创建一个拦截器服务,然后将拦截器添加到app.config()中的$ httpProvider。

创建拦截器服务:

angular.module('app').factory('myInterceptorService', myInterceptorService);

function myInterceptorService($q){
   var errorMessage;
   var bShowHideWatchFlag;
   return{
       requestError:  requestError,
       responseError:  responseError,
       showFlag: bShowFlag,
       errorMessage: errorMessage
  };
  function requestError(rejection){
       errorMesasge = 'Request error';
       bShowHideWatchFlag = true;
       $q.reject(rejection);
       return;
  }
  function responseError(rejection){
       errorMesasge = 'Response error';
       bShowHideWatchFlag = true;
       $q.reject(rejection);
       return;
  }
}

要使用app config注册,请将$ httpProvider添加到app.config

app.config([...,'$httpProvider'...){
    $httpProvider.interceptor.push('myInterceptorService');
}

在您的控制器中,您必须将监视绑定到服务showFlag:

  $scope.$watch( function () { return myInterceptorService.showFlag; },        
    function (oldval,newval) {
       if( oldval!=newval){
            $scope.errorMessage = myInterceptorService.errroMessage;
            $scope.showMessage  = newval;
        }
}, true);

答案 2 :(得分:0)

您可以使用此服务并在各种控制器内共享。 $ http也是一项服务。但是如果你想为数据添加更多内容,你可以创建一个新服务并向其注入$ http。