Enviar búsqueda
Cargar
HTTP Interceptors com AngularJS
•
8 recomendaciones
•
3,237 vistas
Rodrigo Branas
Seguir
Aprenda a utilizar HTTP Interceptors com AngularJS
Leer menos
Leer más
Internet
Denunciar
Compartir
Denunciar
Compartir
1 de 28
Descargar ahora
Descargar para leer sin conexión
Recomendados
Introdução ao AngularJS
Introdução ao AngularJS
Rodrigo Branas
Django + Vue, JavaScript de 3ª generación para modernizar Django
Django + Vue, JavaScript de 3ª generación para modernizar Django
Javier Abadía
Jpa 잘 (하는 척) 하기
Jpa 잘 (하는 척) 하기
경원 이
第一次用 Vue.js 就愛上 [改]
第一次用 Vue.js 就愛上 [改]
Kuro Hsu
ความสุขของกะทิ
ความสุขของกะทิ
Wachara Nets
[2019] 점진적으로 프런트엔드 프레임워크 교체하기
[2019] 점진적으로 프런트엔드 프레임워크 교체하기
NHN FORWARD
엘라스틱서치 실무 가이드_202204.pdf
엘라스틱서치 실무 가이드_202204.pdf
한 경만
Vue js 大型專案架構
Vue js 大型專案架構
Hina Chen
Recomendados
Introdução ao AngularJS
Introdução ao AngularJS
Rodrigo Branas
Django + Vue, JavaScript de 3ª generación para modernizar Django
Django + Vue, JavaScript de 3ª generación para modernizar Django
Javier Abadía
Jpa 잘 (하는 척) 하기
Jpa 잘 (하는 척) 하기
경원 이
第一次用 Vue.js 就愛上 [改]
第一次用 Vue.js 就愛上 [改]
Kuro Hsu
ความสุขของกะทิ
ความสุขของกะทิ
Wachara Nets
[2019] 점진적으로 프런트엔드 프레임워크 교체하기
[2019] 점진적으로 프런트엔드 프레임워크 교체하기
NHN FORWARD
엘라스틱서치 실무 가이드_202204.pdf
엘라스틱서치 실무 가이드_202204.pdf
한 경만
Vue js 大型專案架構
Vue js 大型專案架構
Hina Chen
Why Typescript with Clean Architecture
Why Typescript with Clean Architecture
유진 정
Vue.js + Django - configuración para desarrollo con webpack y HMR
Vue.js + Django - configuración para desarrollo con webpack y HMR
Javier Abadía
Git.pptx
Git.pptx
GDSC UofT Mississauga
Drupalサイトの管理を楽にしてくれる? Multi-site機能について
Drupalサイトの管理を楽にしてくれる? Multi-site機能について
Shumpei Kishi
Redis
Redis
knight1128
Git & Github for beginners
Git & Github for beginners
Paulo Henrique Nonaka
C++ 프로젝트에 단위 테스트 도입하기
C++ 프로젝트에 단위 테스트 도입하기
OnGameServer
From Zero to Spring Boot Hero with GitHub Codespaces
From Zero to Spring Boot Hero with GitHub Codespaces
VMware Tanzu
13 mongoose
13 mongoose
Ahmed Elbassel
Spring Data Jpa
Spring Data Jpa
Ivan Queiroz
Clean code
Clean code
Knoldus Inc.
Extending Java EE with CDI and JBoss Forge
Extending Java EE with CDI and JBoss Forge
Antoine Sabot-Durand
Backup and-recovery2
Backup and-recovery2
Command Prompt., Inc
MySQL8.0_performance_schema.pptx
MySQL8.0_performance_schema.pptx
NeoClova
Gitlab flow solo
Gitlab flow solo
viniciusban
KSUG 스프링캠프 2019 발표자료 - "무엇을 테스트할 것인가, 어떻게 테스트할 것인가"
KSUG 스프링캠프 2019 발표자료 - "무엇을 테스트할 것인가, 어떻게 테스트할 것인가"
용근 권
Introduction to React Hooks
Introduction to React Hooks
Felicia O'Garro
SpringOne Tour: Spring Boot 3 and Beyond
SpringOne Tour: Spring Boot 3 and Beyond
VMware Tanzu
Introducing Drools
Introducing Drools
Mario Fusco
Introduction to Spring Boot!
Introduction to Spring Boot!
Jakub Kubrynski
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
Más contenido relacionado
La actualidad más candente
Why Typescript with Clean Architecture
Why Typescript with Clean Architecture
유진 정
Vue.js + Django - configuración para desarrollo con webpack y HMR
Vue.js + Django - configuración para desarrollo con webpack y HMR
Javier Abadía
Git.pptx
Git.pptx
GDSC UofT Mississauga
Drupalサイトの管理を楽にしてくれる? Multi-site機能について
Drupalサイトの管理を楽にしてくれる? Multi-site機能について
Shumpei Kishi
Redis
Redis
knight1128
Git & Github for beginners
Git & Github for beginners
Paulo Henrique Nonaka
C++ 프로젝트에 단위 테스트 도입하기
C++ 프로젝트에 단위 테스트 도입하기
OnGameServer
From Zero to Spring Boot Hero with GitHub Codespaces
From Zero to Spring Boot Hero with GitHub Codespaces
VMware Tanzu
13 mongoose
13 mongoose
Ahmed Elbassel
Spring Data Jpa
Spring Data Jpa
Ivan Queiroz
Clean code
Clean code
Knoldus Inc.
Extending Java EE with CDI and JBoss Forge
Extending Java EE with CDI and JBoss Forge
Antoine Sabot-Durand
Backup and-recovery2
Backup and-recovery2
Command Prompt., Inc
MySQL8.0_performance_schema.pptx
MySQL8.0_performance_schema.pptx
NeoClova
Gitlab flow solo
Gitlab flow solo
viniciusban
KSUG 스프링캠프 2019 발표자료 - "무엇을 테스트할 것인가, 어떻게 테스트할 것인가"
KSUG 스프링캠프 2019 발표자료 - "무엇을 테스트할 것인가, 어떻게 테스트할 것인가"
용근 권
Introduction to React Hooks
Introduction to React Hooks
Felicia O'Garro
SpringOne Tour: Spring Boot 3 and Beyond
SpringOne Tour: Spring Boot 3 and Beyond
VMware Tanzu
Introducing Drools
Introducing Drools
Mario Fusco
Introduction to Spring Boot!
Introduction to Spring Boot!
Jakub Kubrynski
La actualidad más candente
(20)
Why Typescript with Clean Architecture
Why Typescript with Clean Architecture
Vue.js + Django - configuración para desarrollo con webpack y HMR
Vue.js + Django - configuración para desarrollo con webpack y HMR
Git.pptx
Git.pptx
Drupalサイトの管理を楽にしてくれる? Multi-site機能について
Drupalサイトの管理を楽にしてくれる? Multi-site機能について
Redis
Redis
Git & Github for beginners
Git & Github for beginners
C++ 프로젝트에 단위 테스트 도입하기
C++ 프로젝트에 단위 테스트 도입하기
From Zero to Spring Boot Hero with GitHub Codespaces
From Zero to Spring Boot Hero with GitHub Codespaces
13 mongoose
13 mongoose
Spring Data Jpa
Spring Data Jpa
Clean code
Clean code
Extending Java EE with CDI and JBoss Forge
Extending Java EE with CDI and JBoss Forge
Backup and-recovery2
Backup and-recovery2
MySQL8.0_performance_schema.pptx
MySQL8.0_performance_schema.pptx
Gitlab flow solo
Gitlab flow solo
KSUG 스프링캠프 2019 발표자료 - "무엇을 테스트할 것인가, 어떻게 테스트할 것인가"
KSUG 스프링캠프 2019 발표자료 - "무엇을 테스트할 것인가, 어떻게 테스트할 것인가"
Introduction to React Hooks
Introduction to React Hooks
SpringOne Tour: Spring Boot 3 and Beyond
SpringOne Tour: Spring Boot 3 and Beyond
Introducing Drools
Introducing Drools
Introduction to Spring Boot!
Introduction to Spring Boot!
Destacado
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
Utilizando diretivas com AngularJS
Utilizando diretivas 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
Destacado
(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
Utilizando diretivas com AngularJS
Utilizando diretivas 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
Más de 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
Construindo Diretivas com AngularJS
Construindo Diretivas com AngularJS
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
Más de Rodrigo Branas
(14)
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
Construindo Diretivas com AngularJS
Construindo Diretivas com AngularJS
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
Notas del editor
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
Descargar ahora