AngularJS以智能方式处理$ http错误/成功

问题描述

目前，我的代码段的工作方式类似于发生错误时，它通过一条消息在几秒钟后消失，我用$timeout做到了，即使成功响应，成功消息也会在几秒钟后消失.但由于某些原因，我现在不需要这样.

Currently my snippet works like when an Error occurs, it through a message and disappear after a few second, i did it with $timeout and even if success response, a success message appear and disappear after a few second. but for some reasons, i dont need now like this.

在这里找到我当前的代码段:

here you go for my current snippet:

$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，那么成功和错误将并存.

in above snippet, if i wouldn't use $timeout then success and error are would exist together.

例如:用户提交错误数据并收到错误消息，而在提交正确数据并获得成功消息后，此时屏幕上同时存在成功和错误消息，这很奇怪

我想要类似的内容，当成功消息出现时，它应该存在于屏幕上；如果以后再次出现错误消息，则成功消息应该消失并出现错误消息.

I want something like, When success message appear, it should exist on the screen and if later again an error message occurrs, the success message should disappear and appear error message.

可选:

在这里，您将了解模板中的用法:

Here you go to see how used in templates:

<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-->

希望您遇到此问题:

推荐答案

响应和拒绝处理程序可以调用一个通用函数

The response and rejection handlers can call a common function

$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;
});

然后将通用代码放入通用函数中

Then put common code in the common function:

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>

这篇关于AngularJS以智能方式处理$ http错误/成功的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！