JSFiddle - React, Tailwind, and code Playground

by chandings

HTML

<div ng-app="myApp" ng-controller="myController" style="margin:30px;">
    <button ng-click="clickHandler1()">Success Call</button>
    <button ng-click="clickHandler2()">Failure Call</button>
</div>

JavaScript

var myApp = angular.module("myApp", []);
myApp.config(function ($httpProvider) {
    $httpProvider.interceptors.push('myHTTPInterceptor');
});

myApp.provider('myHTTPInterceptor', ["$q", "$injector", function ($q, $injector) {
    var totalRetries = 3;
    this.$get = function () {
        return {
            'request': function (config) {
                console.log("interceptor config.tryCount: " + config.tryCount);
                if (config.tryCount === null) {
                    config.tryCount = 0;
                }
            }
            'responseError': function (response) {
                if (response.status === 0 && response.config.tryCount < this.totalRetries) {
                    // should retry
                    var $http = $injector.get('$http');
                    response.config.tryCount++;
                    return $http(response.config);
                }
                // give up
                return $q.reject(response);
            }
        }
    };
}]);
myApp.factory("myService", ["$http", function (http) {
    return {
        failureCall: function () {
            http({
                method: "GET",
                url: "http://example.com/dummy",
                config: {}
            });
        }
    }
}]);
myApp.controller("myController", ['$scope', 'myService', function (scope, myService) {
    scope.clickHandler1 = function () {
        console.log("clickHandler1");

    }
    scope.clickHandler2 = function () {
        console.log("clickHandler2");
        myService.failureCall().then(function (result) {
            console.log("success result: " + result);
        }, function (error) {
            console.log("success error: " + error);
        });
    }
}]);