Olá sejam todos muito bem-vindos à continuação da série sobre angular JS meu nome é Rodrigo branas autor do livro angular JS Essentials lançado pel Editora pack Pub e hoje no 15º episódio a gente vai falar sobre interceptors bom pessoal interceptor basicamente é um tipo de serviço que permite a interceptação das requisições e respostas do serviço http tá eh esse serviço tá E ele surgiu como um recurso do angular na versão 1. 1. 4 né eu já trabalho com angular há muito tempo e eu me lembro que na versão 1.
0 eh como não tinha esse recurso disponível a gente tinha que eh duplicar muito código né para tratar eh cenários como por exemplo eh um retorno de status qu de 401 404 403 né que vem para indicar de repente Que o usuário ou não tem autorização a requisitar um determinado tipo de recurso ou ele não tá autenticado ou ele tentou invocar alguma coisa que não existe ou mesmo né um erro inesperado como um 500 E aí todo esse tratamento ficava distribuído na aplicação né então em cada requisição a gente tinha que tratar né a ocorrência do do de um determinado tipo de erro diversas vezes e aí a partir do momento que o interceptor virou um recurso padrão do Framework Eu lembro que isso melhorou bastante tá E hoje eu não imagino como a gente poderia trabalhar com com e com angular JS sem usar interceptor São muitos os cenários em que ele é exigido Tá bom então como a gente falou né o interceptor ele é um serviço tá então eu vou registrar esse serviço usando uma Factory né e basicamente definir um nome para esse interceptor pessoal como toda Factory você sabe que o Framework invoca essa Factory né e a disponibiliza né como injeção de dependência então como ele invoca eu vou fazer um return de um objeto Tá certo a gente abordou bastante essas diferenças de service Factory provider né no episódio que fala sobre serviços e eu recomendo que você assista caso ainda não tenha assistido tá então nessa Factory Eu tenho um return de quatro Estados possíveis que é request request error response e response error são os quatro momentos em que a gente pode interceptar uma e eh determinada requisição né ou uma resposta tá então nesses quatro momentos eu posso criar regras né para realizar a interceptação tá bom bom não basta tá só criar essa Factory você sabe que se eu apenas criar uma Factory como essa né eu vou ter ela disponível paraa injeção mas ela não vira um interceptor automaticamente tá para isso eu vou ter que realizar a configuração né do provider do serviço http você sabe que todo bloco de configuração ele po pode receber apenas né serviços do tipo provider né E também serviços conhecidos aí como constants né então não adianta colocar cifrão http aqui porque ele não vai né Tá disponível né nesse momento do ciclo de vida do Framework né a gente falou bastante sobre isso já em outros episódios E aí uma vez importado né o cifrão http provider eu posso né interagir com esse Array chamado interceptors fazendo um push do nome de cada interceptor que eu queira ativar Tá bom então posso ter vários né então a gente pode fazer essa configuração toda num lugar só tá vamos mostrar isso aí em detalhes para começar eu vou mostrar um interceptor que eu uso bastante nos sistemas que eu desenvolvo né e ele tem um papel interessante e no que tange a questão de burlar mecanismos de Cash todo mundo que já trabalhou bastante né desenvolvendo sistemas baseados em front end que realizam muitas chamadas http Muitas delas parecidas já deve ter tido algum tipo de problema com Cash do tipo assim ó tô trabalhando no sistema da de repente eu insiro um determinado tipo de recurso quando eu vou listar ele não aparece né porque tá com dado cacheado e essa Cash claro que a gente pode trabalhar com alguns tipos de headers nas nossas requisições respostas para tentar indicar pro navegador que ele deve assumir um tipo de comportamento né Eh em que ele deve evitar realizar Cash só que o problema é que nem sempre essa quecha é realizada pelo navegador pode estar na tua rede interna que muitas vezes é proveniente de um proxy ou algum outro tipo de dispositivo Eu já vi acontecer até problemas em relação aos próprios provedores né que porventura tenham eh ligado algum tipo de dispositivo mais agressivo paraa realização de Cash então com esse tipo de interceptor a gente pode marcar as requisições e deixá-las umas diferente das outras por meio de um parâmetro na Carry stream tá é bem simples Na verdade é um é um é um processo até bem rudimentar mas que nos ajuda bastante tá então vou chamar isso de time stamp interceptor Então vamos lá bom vamos colocar isso aqui na nossa aplicação de lista telefônica você sabe que essa aplicação ela tá rodando né com uma API des né do do do episódio em que a gente integrou com backend tá então eh repara só lá no github eu tenho tantos episódios né Eh separados por números né pasta a pasta com todas as modificações feitas né e de uma forma bem construtiva Né desde o início e também tem uma pasta que é o angular JS api tá E esse angular gspi ele vai trazer pra gente olha só esse código da api que basicamente tá usando nodejs não é o objetivo dessa série então a gente já tem uma série ativa de node. js em que a gente aborda né esse tipo de conteúdo tá bom eh basicamente esse server JS ele vai abrir uma API numa porta específica que é 3412 E aí fornecer alguns serviços como barra contatos contato barra ID né poting contatos getting operadoras Tá bom então essa é a api que a gente vai usar integrada na nossa aplicação tá então ela tá aí respondendo né Beleza então eu vou entrar aqui na pasta JS eu vou criar um diretório chamado interceptors tá dentro desse diretório interceptors eu vou criar um arquivo chamado timestamp interceptor PJS tá bom e é nesse timestamp interceptor PJS Eu costumo separar bastante isso por estereótipo Mas você pode seguir a estrutura né aí do seu projeto que você tenha definido tá então você sabe que a gente vai localizar o módulo chamado lista telefônica né que é o módulo da aplicação eu vou registrar uma Factory chamada time stamp interceptor Ok E aí seguido de uma função que é a função invocada né pelo angular momento da injeção e aí nesse return eu vou colocar apenas o request Tá bom você sabe que a gente tem a possibilidade de botar request erro response response erro mas vai Claro né do tipo de interceptor que a gente cria nesse caso só o request é suficiente tá então aqui eu tenho né um parâmetro chamado config que é a request né contém os dados da request que será feita tá então return config e aqui no meio eu vou começar a mostrar agora o que que se passa aqui né então Lembrando que lá no index eu tenho que importar você sabe que esse negócio é é é evitável né como a gente viu lá naquela série sobre grun versus gulp a gente falou bastante tanto do Grant quanto do gop e lá a gente fala sobre plugins e entre esses plugins é um plugin chamado inject que faz com que né isso esse processo de ficar dizendo interceptors bartim stamp interceptor PJS isso possa ser automatizado né isso pode ser automatizado simplesmente varrendo as pastas e incorporando isso automaticamente então tem plugins disponíveis para isso aqui com um ambiente mais didático a gente não vai recorrer né a isso para não aumentar a complexidade desnecessariamente tá então importei lá o time stamp interceptor fiz um request E aí você vai ver que ele não passou aqui nessa linha quando deveria ter passado bom falta etapa então de ativação desse interceptor para isso vamos criar Olha só vou entrar aqui em deixa eu ver onde é que eu tô vamos entrar em config eu vou criar o interceptors config. js né fica teu critério separar as configurações ou não E aí angular P módulo lista telefônica pon config você sabe que tem que passar uma função né E aí aqui eu vou colocar o http provider tá vamos ver o que que tem nesse htp provider E aí antes disso eu tenho que de novo importar o arquivo ó lá jsconfig interceptors config.
js né tudo certo fiz o meu refresh Olha só entre algumas outras coisas eu tenho esse arade interceptors que tá vazio então para ativar um determinado tipo de interceptor eu tenho que fazer ó http provider p interceptors p push Lembrando que a gente falou bastante sobre o push na série desvendando a linguagem JavaScript Episódio de ARS né E aí eu digo o nome do interceptor nesse caso time stamp interceptor fechou Bom vamos lá vou fazer um refresh agora olha só tá vendo aqui que apareceram quatro requisições quando na verdade só tá vendo duas né mas veja bem eu tenho aqui ó um include do footer HTML Então isso é uma requisição tá na sequência eu tenho lá contatos eu tenho operadoras para facilitar eu vou mostrar ó posso fechar isso aqui posso fechar isso aqui vou mostrar só o RL tá só ficar mais simples ó Então tá vendo eu fiz quatro requisições footer e contatos para includes né um include o outro é o include do roteamento né que é essa View aqui e o outro é operadoras e contatos tá só vai me interessar interagir com esses dois aqui do meio né que é operadoras e contatos por conta disso eu posso fazer o seguinte vamos colocar isso numa variável eu posso fazer assim ó como é que a gente faz para ver se uma string nesse caso o RL contém a palavra View Eu quero evitar porque a View para mim não interessa porque a view Pode ser cacheada então não me interessa marcar View né então se não tem conts né então se tem index off View maior que men1 ou seja tem mesmo né return config então aborta nesse ponto senão passa nessa linha né Eh vamos ver deixa eu tirar aqui esse deixar só o RL ficar legal ó tá vendo que eu já consegui interceptar agora só essas duas urls Bom agora vamos fazer a marcação né então config. url é igual a URL que eu acabei de extrair Mas claro que no teu cenário você vai ter canalisar se você já tem qu string se não tem né porque senão você vai botar uma interrogação a mais não dar muito certo e aí vou colocar o parâmetro time stamp Lembrando que podia ser x y no cche tanto faz porque esse parâmetro ele não faz nada no backend ele só serve para ajudar a burlar mecanismos de Cash Que por ventura existam né Mas e aí você pode por exemplo fazer New date pon get time para pegar o tempo em milissegundos né Beleza refresh tá vendo pessoal tá vendo como cada requisição que eu tô fazendo agora ó tá saindo já com um uma marcação que a diferencia um das outras ó primeiro contato saiu com esse segundo contato saiu com outra tá vendo que elas são diferentes então isso sim ajuda a burlar mecanismos de Cash junto com possíveis headers que você queira utilizar Tá bom então Esse é um dos exemplos legais de interceptor Eu particularmente utilizo bastante tá vamos falar um pouquinho então de um interceptor de erro né E como eu vinha falando era muito normal que antigamente a gente tivesse que duplicar muito código na aplicação para ter que ficar tratando ah voltou um 401 Então manda o cara pra tela de login ah voltou um 404 manda o cara pra tela de erro ah voltou um 500 Então esse tipo de tratamento pode ser concentrado com o uso de interceptors Tá bom então para começar eu vou criar né aqui no meu H config você sabe que você não precisa usar todos esses parâmetros aqui de configuração você pode usar menos né e eu vou criar o Barra erro né eu vou concentrar tudo no lugar só né e vai para vild error né vou usar Controller não vou usar resolve também não só isso aqui que eu vou precisar Tá bom então eu vou criar uma rota de erro bem específica Tá certo vou entrar aqui ó deixa eu ver onde é que eu tô e vou entrar em View vou criar aqui error P HTML tá E aqui em error. on HTML eu vou colocar lá a minha Class jumbotron e aqui eu vou escrever o seguinte ó de repente um H3 e não foi possível processar a sua solicitação n só isso vamos testar isso vou colocar error aqui em cima ó tá bom legal para simular um erro agora né né você vai ver que na nossa pi tem lá o Barra contatos barra1 barra contatos bar2 agora não tem quatro né pess só tem três cadastrados lá né se eu chamar o quro tá vendo que cai num 404 aqui então vamos simular esse erro Você tá vendo que eu tô clicando em Bruno Sandra Mariana tá dando tudo certo né eu vou burlar a aplicação só por um minuto e vou falar para ela fazer o seguinte ó contato.
ID mais 1 você vai ver que só isso vai ser suficiente para burlar ó 2 3 4 tá vendo que o comportamento do angular frente a uma rejeição é não rotear ele me Manteve na mesma tela né então ele caiu aqui né no detalhes contato mandou chamar o contato deu erro travou aqui não fez mais nada né bom nesse caso é aqui que eu quero encaminhar para uma tela de erro Tá então vamos escrever esse intercepto fazer isso acontecer tá vamos criar então o nosso ó JS interceptor error interceptor PJS tá vou configurar aqui também ó error interceptor né Vamos aqui e vamos fazer o seguinte ó angular módulo lista telefônica pon Factory error interceptor como eu vou pegar o response eu vou incluir aqui o cifrão q tá cifrão q pessoal é a implementação do angular pro padrão Promise defer para quem tá acostumado a trabalhar com node sabe que existem outros q when blueb tem tem vários tá então o q é o do angular eu vou usar só para rejeitar né a promise que foi feita Tá bom então return e aqui ó deixa eu mostrar pelo slide ficar legal criei o meu error interceptor vou fazer um return de response error só de response erro porque é só o momento em que eu quero realizar a interceptação E aí desse ponto aqui eu vou identificar que esse rejection aqui Veio com status 401 404 500 para eu poder tomar uma ação tá então antes disso eu vou te mostrar o que que tem ali ó response error function rejection né legal return agora aqui eu tô reforçando ó realmente foi rejeitada Então ela já seria rejeitada naturalmente o o defold do angular seria rejeitar caso não seja 200 O Retorno nesse caso foi 401 Então seria rejeitado né aqui se a gente for ver estava já sendo rejeitado ó tá vendo já foi rejeitada E aí vamos fazer isso ó ponto reject rejection tá Depois a gente faz um episódio falando só sobre Promises certo legal console.
