AngularJS handling $http Error/Success in Smart Way

Question

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

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

for example: A user submit error data and he got error message and after he submit right data and got a success message, on that time success and error message are exist together on screen, this weired

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.

Optional:

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

Hope you got this issue:

add this $scope.errorCallBack = ''; in success callback and $scope.successCallBack = ''; in error callback — Durga
– Durga, Commented May 23, 2019 at 14:02
it will return a blank message for both success and error case, i dont want this — dudd
– dudd, Commented May 23, 2019 at 14:10
it is better to use a boolean than strings to check if action succeeded — Bill P
– Bill P, Commented May 23, 2019 at 14:11

georgeawg · Accepted Answer · 2019-05-23 22:06:43Z

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

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

The template can be simplified:

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

Collectives™ on Stack Overflow

AngularJS handling $http Error/Success in Smart Way

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related