AngularJS处理$ HTTP错误/成功的智能方式

Question

当前我的摘要的工作方式就像发生错误时，通过一条消息并在几秒钟后消失，我也使用 $timeout进行了，即使成功响应，成功的消息也会出现并消失。几秒钟。但是由于某些原因，我现在不需要这样。

在这里您要去我当前的片段：

$http.post('http://127.0.0.1:8000/api/v1/contact/', $scope.formModel)
        .then(function(response) {
            $scope.successCallBack = 'You have successfully saved your contact';
            $scope.formModel = {};
            $timeout(function () {
                $scope.successCallBack = '';
            }, 6000);
        }, function(response){
            // Showing user exactly what error occurs
            var errorData = response.data
            $scope.errorCallBack = Object.values(errorData)[0][0];
            $timeout(function () {
                $scope.errorCallBack = '';
            }, 3000);
        });

在上面的摘要中，如果我不使用$timeout，那么成功和错误将在一起。

例如：用户提交错误数据，他收到了错误消息，并且在他提交正确的数据并获得了成功消息后，在屏幕上存在成功和错误消息，此Weired

我想要类似的东西，当成功消息出现时，它应该存在于屏幕上，如果稍后再出现错误消息，则成功消息应该消失并出现错误消息。

可选：

在这里您要查看模板中的使用方式：

<div class="alert alert-success" ng-if="successCallBack">
  <p> {{ successCallBack }} </p>
  <strong>UserID :</strong>{{ userid }} <br>
  <strong> Name :</strong>{{ name }} <br>
  <strong> Email :</strong>{{ email }} <br>
  <strong> Phone :</strong>{{ phone }} <br>
  <a href="#!/crud" class="btn btn-primary">Show Me All Contacts</a>
</div> <!--sucess div ended-->
<div class="alert alert-danger" ng-if="errorCallBack"> <!--( Error div start )this div appear if any error occured during request-->
  <p>Oops! You can't save this contact !</p>
  <p> Cause,  {{ errorCallBack }} </p>
  <strong>UserID :</strong>{{ userid }} <br>
  <strong> Name :</strong>{{ name }} <br>
  <strong> Email :</strong>{{ email }} <br>
  <strong> Phone :</strong>{{ phone }} <br>
</div> <!--error div ended-->

希望您能得到这个问题：

Answer 1

如果我不使用 $timeout，那么成功和错误将在一起。

响应和拒绝处理程序可以调用通用功能

$http.post('http://127.0.0.1:8000/api/v1/contact/', $scope.formModel)
  .then(function(response) {
    displayMessage("success",response);
    return response;
}, function(response){
    displayMessage("error",response);
    throw response;
});

然后将公共代码放在公共函数中：

var timeoutId;
function displayMessage(type,response) {
    var success = (type == "success");
    $scope.messageClass = success ? "alert-success" : "alert-danger";
    var messageDuration = success ? 6000 : 3000;

    if (success) {
        $scope.messageText = "Contact successfully saved.";
    } else if (response.status == 500) { 
        $scope.messageTest = "Oops, Internal Server Error";
    } else {
        $scope.messageText = "Oops, YOU DID SOMETHING WRONG!!!!";
    };
    //cancel previous timeout
    timeoutId && $timeout.cancel(timeoutId);
    timeoutId = $timeout(function() {
        $scope.messageText = "";
    }, messageDuration);
}

可以简化模板：

<div class="alert" ng-class="messageClass" ng-show="messageText">
  <p> {{ messageText }} </p>
  <strong>UserID :</strong>{{ userid }} <br>
  <strong> Name :</strong>{{ name }} <br>
  <strong> Email :</strong>{{ email }} <br>
  <strong> Phone :</strong>{{ phone }} <br>
  <a href="#!/crud" class="btn btn-primary">Show Me All Contacts</a>
</div>