AngularJS обрабатывает ошибку $ http / успех в Smart Way

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, то успехи ошибка будут существовать вместе.

например: пользователь отправляет данные об ошибке, и он получил сообщение об ошибке, и после того, как он отправил правильные данные и получил сообщение об успехе, в это время существуют сообщения об успехе и об ошибкевместе на экране это выветрилось

Я хочу что-то вроде: когда появляется сообщение об успехе, оно должно существовать на экране, и если позже снова появляется сообщение об ошибке, сообщение об успехе должно исчезнуть и появиться сообщение об ошибке.

Необязательно:

Здесь вы увидите, как используются шаблоны:

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