Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!doctype html>
<html>
    <head> 
        <title>Request Recover Example</title>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>
        <style>
            body, textarea {
                font-family: 'Lucida Grande';
                font-size: 13px;
                color: black;
            }
            .result {
                color: blue;
            }
            .code-block {
                margin-top: 20px;
            }
            .code-block textarea {
                border: none;
                background-color: white;
                resize: none;
                width: 100%;
                height: 800px;
            }
        </style>
    </head>
​
    <body ng-app="request-recover-example">
        <div ng-controller="ExampleController" class="result">
            Request <span ng-bind="requestStatus"></span>.
            <span ng-if="isRecovered">(Request was recovered)</span>
        </div>
​
        <div class="code-block">
            Code:
            <textarea disabled="true">
<!doctype html>
<html>
    <head> 
        <title>Request Recover Example</title>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>
    </head>
​
    <body ng-app="request-recover-example">
        <div ng-controller="ExampleController" class="result">
            Request <span ng-bind="requestStatus"></span>.
            <span ng-if="isRecovered">(Request was recovered)</span>
        </div>
​
        <script type="text/javascript">
        var module = angular.module('request-recover-example', []);
        module.factory('requestRejector', ['$q', function($q) {
            var requestRejector = {
                request: function(config) {
                    return $q.reject('requestRejector');
                }
            };
            return requestRejector;
        }]);
        module.factory('requestRecoverer', ['$q', '$rootScope', function($q, $rootScope) {
            var requestRecoverer = {
                requestError: function(rejectReason) {
                    if (rejectReason === 'requestRejector') {
                        $rootScope.isRecovered = true;
                        // Recover the request
                        return {
                            transformRequest: [],
                            transformResponse: [],
                            method: 'GET',
                            url: 'https://api.github.com/users/naorye/repos',
                            headers: {
                                Accept: 'application/json, text/plain, */*'
                            }
                        };
                    } else {
                        return $q.reject(rejectReason);
                    }
                }
            };
            return requestRecoverer;
        }]);
        module.config(['$httpProvider', function($httpProvider) {
            $httpProvider.interceptors.push('requestRejector');
            // Removing 'requestRecoverer' will result to failed requesr 
            $httpProvider.interceptors.push('requestRecoverer'); 
        }]);
​
        module.controller('ExampleController', ['$scope', '$http', function($scope, $http) {
            $scope.requestTime = '[waiting]';
            $http.get('https://api.github.com/users/naorye/repos').then(function() {
                $scope.requestStatus = 'success';
            }, function(rejectReason) {
                $scope.requestStatus = 'failure due to ' + rejectReason;
            });
        }]);
        </script>
    </body>
</html>
            </textarea>
        </div>
​
        <script type="text/javascript">
        var module = angular.module('request-recover-example', []);
        module.factory('requestRejector', ['$q', function($q) {
            var requestRejector = {
                request: function(config) {
                    return $q.reject('requestRejector');
                }
            };
            return requestRejector;
        }]);
        module.factory('requestRecoverer', ['$q', '$rootScope', function($q, $rootScope) {
            var requestRecoverer = {
                requestError: function(rejectReason) {
                    if (rejectReason === 'requestRejector') {
                        $rootScope.isRecovered = true;
                        // Recover the request
                        return {
                            transformRequest: [],
                            transformResponse: [],
                            method: 'GET',
                            url: 'https://api.github.com/users/naorye/repos',
                            headers: {
                                Accept: 'application/json, text/plain, */*'
                            }
                        };
                    } else {
                        return $q.reject(rejectReason);
                    }
                }
            };
            return requestRecoverer;
        }]);
        module.config(['$httpProvider', function($httpProvider) {
            $httpProvider.interceptors.push('requestRejector');
            // Removing 'requestRecoverer' will result to failed request
            $httpProvider.interceptors.push('requestRecoverer'); 
        }]);
​
        module.controller('ExampleController', ['$scope', '$http', function($scope, $http) {
            $scope.requestTime = '[waiting]';
            $http.get('https://api.github.com/users/naorye/repos').then(function() {
                $scope.requestStatus = 'success';
            }, function(rejectReason) {
                $scope.requestStatus = 'failure due to ' + rejectReason;
            });
        }]);
        </script>
    </body>
</html>
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
stevermeisterpro
0viewers