Submit Search
Upload
HTTP Interceptors com AngularJS
•
8 likes
•
3,237 views
Rodrigo Branas
Follow
Aprenda a utilizar HTTP Interceptors com AngularJS
Read less
Read more
Internet
Report
Share
Report
Share
1 of 28
Download now
Download to read offline
Recommended
Introdução ao AngularJS
Introdução ao AngularJS
Rodrigo Branas
Utilizando diretivas com AngularJS
Utilizando diretivas com AngularJS
Rodrigo Branas
Construindo Diretivas com AngularJS
Construindo Diretivas com AngularJS
Rodrigo Branas
I got 99 problems, but ReST ain't one
I got 99 problems, but ReST ain't one
Adrian Cole
Best practices for RESTful web service design
Best practices for RESTful web service design
Ramin Orujov
Lambda and Stream Master class - part 1
Lambda and Stream Master class - part 1
José Paumard
Introdução React.js
Introdução React.js
Henrique Gogó
#5 CRUD no MongoDB
#5 CRUD no MongoDB
Gabriel Alves Scavassa
Recommended
Introdução ao AngularJS
Introdução ao AngularJS
Rodrigo Branas
Utilizando diretivas com AngularJS
Utilizando diretivas com AngularJS
Rodrigo Branas
Construindo Diretivas com AngularJS
Construindo Diretivas com AngularJS
Rodrigo Branas
I got 99 problems, but ReST ain't one
I got 99 problems, but ReST ain't one
Adrian Cole
Best practices for RESTful web service design
Best practices for RESTful web service design
Ramin Orujov
Lambda and Stream Master class - part 1
Lambda and Stream Master class - part 1
José Paumard
Introdução React.js
Introdução React.js
Henrique Gogó
#5 CRUD no MongoDB
#5 CRUD no MongoDB
Gabriel Alves Scavassa
Learn REST in 18 Slides
Learn REST in 18 Slides
Suraj Gupta
You code sucks, let's fix it
You code sucks, let's fix it
Rafael Dohms
Python Django tutorial | Getting Started With Django | Web Development With D...
Python Django tutorial | Getting Started With Django | Web Development With D...
Edureka!
Spring Boot 소개
Spring Boot 소개
beom kyun choi
Ajax (Asynchronous JavaScript and XML)
Ajax (Asynchronous JavaScript and XML)
Abdelouahed Abdou
OAuth2 and Spring Security
OAuth2 and Spring Security
Orest Ivasiv
Design Beautiful REST + JSON APIs
Design Beautiful REST + JSON APIs
Stormpath
Introduction à ajax
Introduction à ajax
Abdoulaye Dieng
15. DateTime API.ppt
15. DateTime API.ppt
VISHNUSHANKARSINGH3
Ajax.ppt
Ajax.ppt
MAGNA COLLEGE OF ENGINEERING
Django Framework and Application Structure
Django Framework and Application Structure
SEONGTAEK OH
React Native Firebase Realtime Database + Authentication
React Native Firebase Realtime Database + Authentication
Kobkrit Viriyayudhakorn
Mongoose and MongoDB 101
Mongoose and MongoDB 101
Will Button
Spring Framework - AOP
Spring Framework - AOP
Dzmitry Naskou
Battle Of The Microservice Frameworks: Micronaut versus Quarkus edition!
Battle Of The Microservice Frameworks: Micronaut versus Quarkus edition!
Michel Schudel
Spring Data JPA from 0-100 in 60 minutes
Spring Data JPA from 0-100 in 60 minutes
VMware Tanzu
JWT-spring-boot-avancer.pdf
JWT-spring-boot-avancer.pdf
Jaouad Assabbour
End to end todo list app with NestJs - Angular - Redux & Redux Saga
End to end todo list app with NestJs - Angular - Redux & Redux Saga
Babacar NIANG
Puppeteer can automate that! - Frontmania
Puppeteer can automate that! - Frontmania
Önder Ceylan
Data Persistence in Android with Room Library
Data Persistence in Android with Room Library
Reinvently
Node.js - #7 - Core Modules - http - Parte 1 - Rodrigo Branas
Node.js - #7 - Core Modules - http - Parte 1 - Rodrigo Branas
Rodrigo Branas
Criando serviços com AngularJS
Criando serviços com AngularJS
Rodrigo Branas
More Related Content
What's hot
Learn REST in 18 Slides
Learn REST in 18 Slides
Suraj Gupta
You code sucks, let's fix it
You code sucks, let's fix it
Rafael Dohms
Python Django tutorial | Getting Started With Django | Web Development With D...
Python Django tutorial | Getting Started With Django | Web Development With D...
Edureka!
Spring Boot 소개
Spring Boot 소개
beom kyun choi
Ajax (Asynchronous JavaScript and XML)
Ajax (Asynchronous JavaScript and XML)
Abdelouahed Abdou
OAuth2 and Spring Security
OAuth2 and Spring Security
Orest Ivasiv
Design Beautiful REST + JSON APIs
Design Beautiful REST + JSON APIs
Stormpath
Introduction à ajax
Introduction à ajax
Abdoulaye Dieng
15. DateTime API.ppt
15. DateTime API.ppt
VISHNUSHANKARSINGH3
Ajax.ppt
Ajax.ppt
MAGNA COLLEGE OF ENGINEERING
Django Framework and Application Structure
Django Framework and Application Structure
SEONGTAEK OH
React Native Firebase Realtime Database + Authentication
React Native Firebase Realtime Database + Authentication
Kobkrit Viriyayudhakorn
Mongoose and MongoDB 101
Mongoose and MongoDB 101
Will Button
Spring Framework - AOP
Spring Framework - AOP
Dzmitry Naskou
Battle Of The Microservice Frameworks: Micronaut versus Quarkus edition!
Battle Of The Microservice Frameworks: Micronaut versus Quarkus edition!
Michel Schudel
Spring Data JPA from 0-100 in 60 minutes
Spring Data JPA from 0-100 in 60 minutes
VMware Tanzu
JWT-spring-boot-avancer.pdf
JWT-spring-boot-avancer.pdf
Jaouad Assabbour
End to end todo list app with NestJs - Angular - Redux & Redux Saga
End to end todo list app with NestJs - Angular - Redux & Redux Saga
Babacar NIANG
Puppeteer can automate that! - Frontmania
Puppeteer can automate that! - Frontmania
Önder Ceylan
Data Persistence in Android with Room Library
Data Persistence in Android with Room Library
Reinvently
What's hot
(20)
Learn REST in 18 Slides
Learn REST in 18 Slides
You code sucks, let's fix it
You code sucks, let's fix it
Python Django tutorial | Getting Started With Django | Web Development With D...
Python Django tutorial | Getting Started With Django | Web Development With D...
Spring Boot 소개
Spring Boot 소개
Ajax (Asynchronous JavaScript and XML)
Ajax (Asynchronous JavaScript and XML)
OAuth2 and Spring Security
OAuth2 and Spring Security
Design Beautiful REST + JSON APIs
Design Beautiful REST + JSON APIs
Introduction à ajax
Introduction à ajax
15. DateTime API.ppt
15. DateTime API.ppt
Ajax.ppt
Ajax.ppt
Django Framework and Application Structure
Django Framework and Application Structure
React Native Firebase Realtime Database + Authentication
React Native Firebase Realtime Database + Authentication
Mongoose and MongoDB 101
Mongoose and MongoDB 101
Spring Framework - AOP
Spring Framework - AOP
Battle Of The Microservice Frameworks: Micronaut versus Quarkus edition!
Battle Of The Microservice Frameworks: Micronaut versus Quarkus edition!
Spring Data JPA from 0-100 in 60 minutes
Spring Data JPA from 0-100 in 60 minutes
JWT-spring-boot-avancer.pdf
JWT-spring-boot-avancer.pdf
End to end todo list app with NestJs - Angular - Redux & Redux Saga
End to end todo list app with NestJs - Angular - Redux & Redux Saga
Puppeteer can automate that! - Frontmania
Puppeteer can automate that! - Frontmania
Data Persistence in Android with Room Library
Data Persistence in Android with Room Library
Viewers also liked
Node.js - #7 - Core Modules - http - Parte 1 - Rodrigo Branas
Node.js - #7 - Core Modules - http - Parte 1 - Rodrigo Branas
Rodrigo Branas
Criando serviços com AngularJS
Criando serviços com AngularJS
Rodrigo Branas
Criando Filtros com AngularJS
Criando Filtros com AngularJS
Rodrigo Branas
Scope AngularJS
Scope AngularJS
Rodrigo Branas
Criando aplicações Single-Page com AngularJS
Criando aplicações Single-Page com AngularJS
Rodrigo Branas
A evolução do AngularJS
A evolução do AngularJS
Rodrigo Branas
#2 - Git - DAG
#2 - Git - DAG
Rodrigo Branas
AngularJS $http Interceptors (Explanation and Examples)
AngularJS $http Interceptors (Explanation and Examples)
Brian Swartzfager
Node.js - #5 - Process - Rodrigo Branas
Node.js - #5 - Process - Rodrigo Branas
Rodrigo Branas
Node.js - #6 - Core Modules - net - Rodrigo Branas
Node.js - #6 - Core Modules - net - Rodrigo Branas
Rodrigo Branas
Node.js - #2 - Sistema de Módulos - Rodrigo Branas
Node.js - #2 - Sistema de Módulos - Rodrigo Branas
Rodrigo Branas
HTTP, JSON, REST e AJAX com AngularJS
HTTP, JSON, REST e AJAX com AngularJS
Rodrigo Branas
JavaScript - Date
JavaScript - Date
Rodrigo Branas
Automação de Testes com AngularJS
Automação de Testes com AngularJS
Rodrigo Branas
AngularJS - 10 passos para aprender a criar suas directivas
AngularJS - 10 passos para aprender a criar suas directivas
Janderson Fernandes Cardoso
JavaScript - Expressões Regulares
JavaScript - Expressões Regulares
Rodrigo Branas
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...
Rodrigo Branas
Desvendando a linguagem JavaScript
Desvendando a linguagem JavaScript
Rodrigo Branas
Grunt
Grunt
Rodrigo Branas
AngularJS $Provide Service
AngularJS $Provide Service
Eyal Vardi
Viewers also liked
(20)
Node.js - #7 - Core Modules - http - Parte 1 - Rodrigo Branas
Node.js - #7 - Core Modules - http - Parte 1 - Rodrigo Branas
Criando serviços com AngularJS
Criando serviços com AngularJS
Criando Filtros com AngularJS
Criando Filtros com AngularJS
Scope AngularJS
Scope AngularJS
Criando aplicações Single-Page com AngularJS
Criando aplicações Single-Page com AngularJS
A evolução do AngularJS
A evolução do AngularJS
#2 - Git - DAG
#2 - Git - DAG
AngularJS $http Interceptors (Explanation and Examples)
AngularJS $http Interceptors (Explanation and Examples)
Node.js - #5 - Process - Rodrigo Branas
Node.js - #5 - Process - Rodrigo Branas
Node.js - #6 - Core Modules - net - Rodrigo Branas
Node.js - #6 - Core Modules - net - Rodrigo Branas
Node.js - #2 - Sistema de Módulos - Rodrigo Branas
Node.js - #2 - Sistema de Módulos - Rodrigo Branas
HTTP, JSON, REST e AJAX com AngularJS
HTTP, JSON, REST e AJAX com AngularJS
JavaScript - Date
JavaScript - Date
Automação de Testes com AngularJS
Automação de Testes com AngularJS
AngularJS - 10 passos para aprender a criar suas directivas
AngularJS - 10 passos para aprender a criar suas directivas
JavaScript - Expressões Regulares
JavaScript - Expressões Regulares
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...
Desvendando a linguagem JavaScript
Desvendando a linguagem JavaScript
Grunt
Grunt
AngularJS $Provide Service
AngularJS $Provide Service
More from Rodrigo Branas
Clean Architecture
Clean Architecture
Rodrigo Branas
Node.js - #4 - Timers - Rodrigo Branas
Node.js - #4 - Timers - Rodrigo Branas
Rodrigo Branas
Node.js - #3 - Global Objects - Rodrigo Branas
Node.js - #3 - Global Objects - Rodrigo Branas
Rodrigo Branas
Node.js - #1 - Introdução - Rodrigo Branas
Node.js - #1 - Introdução - Rodrigo Branas
Rodrigo Branas
#6 - Git - Desfazendo as coisas
#6 - Git - Desfazendo as coisas
Rodrigo Branas
#1 - Git - Introdução
#1 - Git - Introdução
Rodrigo Branas
#5 - Git - Contribuindo com um repositório remoto
#5 - Git - Contribuindo com um repositório remoto
Rodrigo Branas
#4 - Git - Stash
#4 - Git - Stash
Rodrigo Branas
#3 - Git - Branching e Merging
#3 - Git - Branching e Merging
Rodrigo Branas
Técnicas de Refactoring
Técnicas de Refactoring
Rodrigo Branas
Selenium - WebDriver
Selenium - WebDriver
Rodrigo Branas
Test-Driven Development com JavaScript, Jasmine Karma
Test-Driven Development com JavaScript, Jasmine Karma
Rodrigo Branas
Bower
Bower
Rodrigo Branas
More from Rodrigo Branas
(13)
Clean Architecture
Clean Architecture
Node.js - #4 - Timers - Rodrigo Branas
Node.js - #4 - Timers - Rodrigo Branas
Node.js - #3 - Global Objects - Rodrigo Branas
Node.js - #3 - Global Objects - Rodrigo Branas
Node.js - #1 - Introdução - Rodrigo Branas
Node.js - #1 - Introdução - Rodrigo Branas
#6 - Git - Desfazendo as coisas
#6 - Git - Desfazendo as coisas
#1 - Git - Introdução
#1 - Git - Introdução
#5 - Git - Contribuindo com um repositório remoto
#5 - Git - Contribuindo com um repositório remoto
#4 - Git - Stash
#4 - Git - Stash
#3 - Git - Branching e Merging
#3 - Git - Branching e Merging
Técnicas de Refactoring
Técnicas de Refactoring
Selenium - WebDriver
Selenium - WebDriver
Test-Driven Development com JavaScript, Jasmine Karma
Test-Driven Development com JavaScript, Jasmine Karma
Bower
Bower
HTTP Interceptors com AngularJS
1.
Rodrigo Branas –
@rodrigobranas - http://www.agilecode.com.br Interceptors com AngularJS
2.
3.
Um interceptor é
um tipo de serviço que permite a interceptação das requisições e respostas do serviço $http.
4.
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. });
5.
Configurando o interceptor O
serviço $http possui um array de interceptors que podem ser configurados na inicialização da aplicação.
6.
1. app.config(function ()
{ 2. });
7.
1. app.config(function ($httpProvider)
{ 2. });
8.
1. app.config(function ($httpProvider)
{ 2. $httpProvider.interceptors.push("nomeDoInterceptorA"); 3. });
9.
1. app.config(function ($httpProvider)
{ 2. $httpProvider.interceptors.push("nomeDoInterceptorA"); 3. $httpProvider.interceptors.push("nomeDoInterceptorB"); 4. });
10.
1. app.config(function ($httpProvider)
{ 2. $httpProvider.interceptors.push("nomeDoInterceptorA"); 3. $httpProvider.interceptors.push("nomeDoInterceptorB"); 4. $httpProvider.interceptors.push("nomeDoInterceptorC"); 5. });
11.
1. app.config(function ($httpProvider)
{ 2. $httpProvider.interceptors.push("nomeDoInterceptorA"); 3. $httpProvider.interceptors.push("nomeDoInterceptorB"); 4. $httpProvider.interceptors.push("nomeDoInterceptorC"); 5. });
12.
Timestamp Interceptor Adiciona
uma marcação contendo um timestamp em todas as requisições.
13.
1. app.factory("timestampInterceptor", function
() { 2. });
14.
1. app.factory("timestampInterceptor", function
() { 2. return { 3. }; 4. });
15.
1. app.factory("timestampInterceptor", function
() { 2. return { 3. request: function (config) { 4. return config; 5. } 6. }; 7. });
16.
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. });
17.
1. app.config(function ($httpProvider)
{ 2. $httpProvider.interceptors.push("timestampInterceptor"); 3. });
18.
Error Interceptor Exibe
a tela de erro padrão caso uma requisição HTTP receba um status code 404 como resposta.
19.
1. app.factory("errorInterceptor", function
() { 2. });
20.
1. app.factory("errorInterceptor", function
($q) { 2. return { 3. responseError: function (rejection) { 4. return $q.reject(rejection); 5. } 6. }; 7. });
21.
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. });
22.
1. app.config(function ($httpProvider)
{ 2. $httpProvider.interceptors.push("errorInterceptor"); 3. });
23.
Loading Interceptor Exibe
uma imagem de loading enquanto tiver uma requisição em andamento.
24.
1. app.factory("loadingInterceptor", function
() { 2. });
25.
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. });
26.
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. });
27.
1. app.config(function ($httpProvider)
{ 2. $httpProvider.interceptors.push("loadingInterceptor"); 3. });
28.
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
Editor's Notes
Qual é a sua obra?
Qual é a sua obra?
Desmotivado
Desmotivado
Motivação
Desmotivação
Desmotivação
Desmotivação
Desmotivação
Desmotivação
Desmotivação
Desmotivação
Desmotivação
Desmotivação
Desmotivação
Desmotivação
Desmotivação
Desmotivação
Desmotivação
Desmotivação
Desmotivação
Desmotivação
Desmotivação
Desmotivação
Desmotivação
Desmotivação
Desmotivação
Desmotivação
Desmotivação
Desmotivação
Desmotivação
Download now