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