O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

HTTP Interceptors com AngularJS

2.579 visualizações

Publicada em

Aprenda a utilizar HTTP Interceptors com AngularJS

Publicada em: Internet
  • Seja o primeiro a comentar

HTTP Interceptors com AngularJS

  1. 1. Rodrigo Branas – @rodrigobranas - http://www.agilecode.com.br Interceptors com AngularJS
  2. 2. Um interceptor é um tipo de serviço que permite a interceptação das requisições e respostas do serviço $http.
  3. 3. 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. });
  4. 4. Configurando o interceptor O serviço $http possui um array de interceptors que podem ser configurados na inicialização da aplicação.  
  5. 5. 1. app.config(function  ()  {   2. });
  6. 6. 1. app.config(function  ($httpProvider)  {   2. });
  7. 7. 1. app.config(function  ($httpProvider)  {   2.    $httpProvider.interceptors.push("nomeDoInterceptorA");   3. });
  8. 8. 1. app.config(function  ($httpProvider)  {   2.    $httpProvider.interceptors.push("nomeDoInterceptorA");   3.    $httpProvider.interceptors.push("nomeDoInterceptorB");   4. });
  9. 9. 1. app.config(function  ($httpProvider)  {   2.    $httpProvider.interceptors.push("nomeDoInterceptorA");   3.    $httpProvider.interceptors.push("nomeDoInterceptorB");   4.    $httpProvider.interceptors.push("nomeDoInterceptorC");   5. });
  10. 10. 1. app.config(function  ($httpProvider)  {   2.    $httpProvider.interceptors.push("nomeDoInterceptorA");   3.    $httpProvider.interceptors.push("nomeDoInterceptorB");   4.    $httpProvider.interceptors.push("nomeDoInterceptorC");   5. });
  11. 11. Timestamp Interceptor   Adiciona uma marcação contendo um timestamp em todas as requisições.  
  12. 12. 1. app.factory("timestampInterceptor",  function  ()  {   2. });
  13. 13. 1. app.factory("timestampInterceptor",  function  ()  {   2.    return  {   3.    };   4. });
  14. 14. 1. app.factory("timestampInterceptor",  function  ()  {   2.    return  {   3.        request:  function  (config)  {   4.            return  config;   5.        }   6.    };   7. });
  15. 15. 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. });
  16. 16. 1. app.config(function  ($httpProvider)  {   2.    $httpProvider.interceptors.push("timestampInterceptor");   3. });
  17. 17. Error Interceptor   Exibe a tela de erro padrão caso uma requisição HTTP receba um status code 404 como resposta.  
  18. 18. 1. app.factory("errorInterceptor",  function  ()  {   2. });
  19. 19. 1. app.factory("errorInterceptor",  function  ($q)  {   2.    return  {   3.        responseError:  function  (rejection)  {   4.            return  $q.reject(rejection);   5.        }   6.    };   7. });
  20. 20. 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. });
  21. 21. 1. app.config(function  ($httpProvider)  {   2.    $httpProvider.interceptors.push("errorInterceptor");   3. });
  22. 22. Loading Interceptor   Exibe uma imagem de loading enquanto tiver uma requisição em andamento.  
  23. 23. 1. app.factory("loadingInterceptor",  function  ()  {   2. });
  24. 24. 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. });
  25. 25. 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. });
  26. 26. 1. app.config(function  ($httpProvider)  {   2.    $httpProvider.interceptors.push("loadingInterceptor");   3. });
  27. 27. 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

×