Rodrigo Branas – @rodrigobranas - http://www.agilecode.com.br

Interceptors com AngularJS

Um interceptor é um tipo de serviço que permite a interceptação das requisições e

respostas do serviço $http.

1. app.factory("nomeDoInterceptorA",  function  ($q)  {  2.    return  {  3.        request:  function  (config)  {  4.            return  config;  5.        },  6.        requestError:  function  (rejection)  {  7.            return  $q.reject(rejection);  8.        },  9.        response:  function  (response)  {  10.            return  response;  11.        },  12.        responseError:  function  (rejection)  {  13.            return  $q.reject(rejection);  14.        }  15.    };  16. });

Configurando o interceptor

O serviço $http possui um array de interceptors que podem ser configurados na

inicialização da aplicação.  

1. app.config(function  ()  {  2. });

1. app.config(function  ($httpProvider)  {  2. });

1. app.config(function  ($httpProvider)  {  2.    $httpProvider.interceptors.push("nomeDoInterceptorA");  3. });

1. app.config(function  ($httpProvider)  {  2.    $httpProvider.interceptors.push("nomeDoInterceptorA");  3.    $httpProvider.interceptors.push("nomeDoInterceptorB");  4. });

1. app.config(function  ($httpProvider)  {  2.    $httpProvider.interceptors.push("nomeDoInterceptorA");  3.    $httpProvider.interceptors.push("nomeDoInterceptorB");  4.    $httpProvider.interceptors.push("nomeDoInterceptorC");  5. });

1. app.config(function  ($httpProvider)  {  2.    $httpProvider.interceptors.push("nomeDoInterceptorA");  3.    $httpProvider.interceptors.push("nomeDoInterceptorB");  4.    $httpProvider.interceptors.push("nomeDoInterceptorC");  5. });

Timestamp Interceptor  

Adiciona uma marcação contendo um timestamp em todas as requisições.  

1. app.factory("timestampInterceptor",  function  ()  {  2. });

1. app.factory("timestampInterceptor",  function  ()  {  2.    return  {  3.    };  4. });

1. app.factory("timestampInterceptor",  function  ()  {  2.    return  {  3.        request:  function  (config)  {  4.            return  config;  5.        }  6.    };  7. });

1. app.factory("timestampInterceptor",  function  ()  {  2.    return  {  3.        request:  function  (config)  {  4.            var  timestamp  =  new  Date().getTime();  5.            config.url  =  config.url  +  "?timestamp="  +  timestamp;  6.            return  config;  7.        }    8.    };  9. });

1. app.config(function  ($httpProvider)  {  2.    $httpProvider.interceptors.push("timestampInterceptor");  3. });

Error Interceptor  

Exibe a tela de erro padrão caso uma requisição HTTP receba um status code 404

como resposta.  

1. app.factory("errorInterceptor",  function  ()  {  2. });

1. app.factory("errorInterceptor",  function  ($q)  {  2.    return  {  3.        responseError:  function  (rejection)  {  4.            return  $q.reject(rejection);  5.        }  6.    };  7. });

1. app.factory("errorInterceptor",  function  ($q,  $location)  {  2.    return  {  3.        responseError:  function  (rejection)  {  4.            if  (rejection.status  ==  404)  {  5.                $location.path("/error");  6.            }  7.            return  $q.reject(rejection);  8.        }  9.    };  10. });

1. app.config(function  ($httpProvider)  {  2.    $httpProvider.interceptors.push("errorInterceptor");  3. });

Loading Interceptor  

Exibe uma imagem de loading enquanto tiver uma requisição em andamento.  

1. app.factory("loadingInterceptor",  function  ()  {  2. });

1. app.factory("loadingInterceptor",  function  ($q)  {  2.    return  {  3.        request:  function  (config)  {  4.            return  config;  5.        },  6.        requestError:  function  (rejection)  {  7.            return  $q.reject(rejection);  8.        },  9.        response:  function  (response)  {  10.            return  response;  11.        },  12.        responseError:  function  (rejection)  {  13.            return  $q.reject(rejection);  14.        }  15.    };  16. });

1. app.factory("loadingInterceptor",  function  ($q,  $rootScope)  {  2.    return  {  3.        request:  function  (config)  {  4.            $rootScope.loading  =  true;  5.            return  config;  6.        },  7.        requestError:  function  (rejection)  {  8.            $rootScope.loading  =  false;  9.            return  $q.reject(rejection);  10.        },  11.        response:  function  (response)  {  12.            $rootScope.loading  =  false;  13.            return  response;  14.        },  15.        responseError:  function  (rejection)  {  16.            $rootScope.loading  =  false;  17.            return  $q.reject(rejection);  18.        }  19.    };  20. });

1. app.config(function  ($httpProvider)  {  2.    $httpProvider.interceptors.push("loadingInterceptor");  3. });

Rodrigo Branas  Agile Code: http://www.agilecode.com.br Twitter: @rodrigobranas SlideShare: http://www.slideshare.com/rodrigobranas YouTube: http://www.youtube.com/rodrigobranas LinkedIn: http://br.linkedin.com/in/rodrigobranas +Plus: https://plus.google.com/+RodrigoBranas GitHub: http://www.github.com/rodrigobranas