Post on 07-Jul-2015
description
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