Fetch + catch: pare de engolir erro em silêncio
Fetch com URL, tratamento de erro e catch na prática
Resposta direta
Fetch com URL, tratamento de erro e catch na prática. Web Hub, onde a gente ensina Desenvolvimento Web do básico até o avançado Desde a parte da experiência de usuário Design, desenvolvimento front-end, back-end Tudo mais, então a gente tem esse módulo De JavaScript, a gente tem a aula Do FET e eu vou trazer esse corte Aqui pra vocês, espero que seja útil Espero.
Montar a URL com intenção
Quando o episódio chega em «Montar a URL com intenção», o gancho útil para fetch javascript catch erros é transformar o trecho em decisão — não em resumo genérico.
Web Hub, onde a gente ensina Desenvolvimento Web do básico até o avançado Desde a parte da experiência de usuário Design, desenvolvimento front-end, back-end Tudo mais, então a gente tem esse módulo De JavaScript, a gente tem a aula Do FET e eu vou trazer esse corte Aqui pra vocês, espero que seja útil Espero que agregue pra você Se você quiser saber mais sobre a comunidade Como você se tornar um membro Basta você clicar no link na descrição Aqui do vídeo, qualquer dúvida pode chamar a gente No WhatsApp, beleza? Bora pro conteúdo Assim Aqui vocês vão aprender a fazer isso, a gente vai fazer um exercício prático também, bem bacana, só que conforme vocês forem assistindo os módulos, vocês verem PHP, banco de dados, tudo vai fazendo mais sentido, entendeu? Só que eu não vejo muito por que vocês aprenderem isso aqui, se a gente já pode ir para o Fetch, que ele é um método baseado em Promise, é bem fácil de ser utilizado, mas moderno, beleza? Minha promise então esse cara aqui a gente vai instanciar uma nova promise quando a gente instancia uma nova promise lembra que a promise ela vai ter o reject e o resolve, lembra?
O resolve ele vai usar o then e o reject vai utilizar o catch pra capturar erros, então aqui por exemplo, resolve e reject, só que aqui dentro da promise no caso ele vai aceitar uma função né? Então, a gente fazendo isso daqui de uma iron function, com esses parâmetros de entrada, resolve e reject, a gente pode fazer aqui essa iron function, e aqui a gente faria uma validação. Se aqui for true, se alguma coisa der certo no caso, a gente daria um resolve, e aí a gente passaria uma mensagem aqui de deu tudo certo. Então aqui dentro a gente passaria algum parâmetro de entrada, que seria, por exemplo, mensagem sucesso, isso aqui é uma function, como essa mensagem de sucesso é um parâmetro só, não precisa de parênteses, aí aqui a gente poderia dar esse console.log mensagem sucesso.
Quando as pessoas, por exemplo, vão pesquisar algum CEP, não sei se você já foi fazer cadastro em algum site, quando você colocou o seu CEP lá, todos os campos abaixo de rua, estado. Então, se tivesse um campo input e o usuário preenchesse um sep, bastaria a gente colocar um template string para jogar o sep dele aqui, fazer uma pesquisa nessa URL. Então, quando a gente está puxando o fetch, vou puxar aqui, quando a gente puxa o fetch, ele aceita como parâmetro de entrada o seguinte, aqui você pode ver que é a URL, Tá vendo? Mas só para a gente visualizar, depois quando a gente for fazer um exercício, a gente faz isso de forma mais completa, eu vou só passar esse valorzinho aqui, poderia ser um CEP qualquer, tá?
Feche «Montar a URL com intenção» com um experimento de 30–90 minutos ligado a fetch javascript catch erros: artefato + critério binário — sem inventar número fora da fonte.
Na prática
Information gain: use só o que a fonte afirma sobre fetch javascript catch erros; scaffolding editorial não inventa número.
O que o catch captura
«O que o catch captura» é onde fetch javascript catch erros deixa de ser vibe e vira critério. O material empurra execução observável, não plateia.
Por exemplo, se você tiver um arquivo PHP no seu backend, você poderia estar mandando algum dado para que o PHP salvasse isso no seu banco de dados, por exemplo. Lá no módulo de PHP vocês vão entender isso mais tranquilo também, pode ficar de boa, mas aqui a gente vai utilizar GET porque a gente vai estar pegando dados. Aí a gente pode passar informação também, por exemplo, essa informação que a gente está pegando é no nosso servidor ou é em outro servidor? Igualzinho essa promise aqui Se caso o fetch der certo A gente vai jogar um dena aqui A mesma coisa E se ele der errado a gente vai jogar um catch Então vai ter esses métodos Da mesma forma, então vamos lá Eu vou jogar um dena aqui Como vai ser esse dena?
Bom, a gente pode apresentar uma mensagem De sucesso Da mesma forma Isso daqui através de uma Error function, aqui nesse caso Então aqui a gente daria, vamos lá, o console.log mensagem de sucesso, porque isso daqui, ele está verificando se essa conexão, se essa requisição foi feita com sucesso ou não. Às vezes não conseguiu se conectar com o servidor, o servidor está fora do ar, ou o status do servidor, qualquer motivo, Estão aqui, ó Você pode ver Que foi A mesma coisa, aqui a gente vai dar um console.log erro. Então quando a gente tá fazendo essa comunicação com o JavaScript, nesse servidor, a resposta que ele vai dar, que é essa resposta aqui, isso daqui é um JSON. Lá no módulo de PHP a gente vai ter uma aula que vai falar só sobre JSON, você pode ficar tranquilo, mas explicando de uma forma simples para você, que é bem simples mesmo.
Esse arquivo que ela quer mandar é transformado em JSON, que é um arquivo bem levinho, texto, manda, chegando aqui ele pega esse arquivo em JSON e aí ele pode converter em um objeto, por exemplo, pode fazer o que ele quiser com esse arquivo, mas lá no modo de PHP vocês vão entender isso melhor, tá? Só que se eu estou falando para ele que eu quero que seja em formato JSON, e se a API me retornasse uma outra coisa? Nós temos, então, erro da requisição com o servidor, que aí quem atua vai ser o catch, ali embaixo, é o resultado da promise no catch. Se o entregador não conseguir chegar na pizzaria porque o endereço está errado, vamos supor, igual a gente fez aqui no VASEP, o endereço está errado, então a resposta dessa promise seria esse primeiro erro aqui, o erro da requisição com o servidor, então ele já iria para o catch, porque o entregador nem conseguiu chegar na pizzaria.
Depois de «O que o catch captura», anote uma métrica (tempo, taxa, retries ou conversão) para fetch javascript catch erros e rode um ciclo curto antes de escalar.
Na prática
Fetch com URL, tratamento de erro e catch na prática.
Erros que passam batido
Sob o ângulo de «Erros que passam batido», o que importa em fetch javascript catch erros é o próximo passo testável. Se não muda prioridade em 48h, ainda é ruído.
Agora vamos supor que o entregador consegue chegar na pizzaria, então o endereço está certo, via CEP está certinho, só que por algum motivo não vai dar certo. Mas ele conseguiu contato com a pizzaria, conseguiu contato com o servidor, só que por algum motivo não vai ter como te trazer a pizza, por conta de algum erro no status da pizzaria. Bom, para a gente saber se tem algum erro nesse status, a gente precisa saber se tem algum erro nessa mensagem de sucesso aqui. Então aqui a gente pode fazer o seguinte, para a gente verificar se tem um erro de status, a gente tem uma propriedade que é o ponto ok.
O método seria se fosse assim, é o ponto, a palavra e a abertura, a execução daquele método, como é, por exemplo, esse JSON, é um método dessa mensagem de sucesso aqui, que é o nosso objeto de retorno. A partir dele, então, a gente vai conseguir ver esse erro de status, porque a gente obteve a mensagem, só que nessa mensagem teve algum problema. O conteúdo desse retorno vai ser um JSON ou então o conteúdo do retorno da API que você está utilizando. A gente vai lançar um novo erro e se for identificado, ou seja, se o código executar esse cara aqui, quer dizer que foi gerado um novo erro e ele já vai pular direto para o catch.
Colocou o throw new error e foi lido, foi executado, só que isso aqui só vai ser lido se realmente aconteceu um erro, porque a gente colocou ele dentro do bloco do if. Se chegar nesse cara aqui, quer dizer que foi encontrado um erro, ele já vai parar a execução por aqui e já pula direto para o catch. E também tem o status Então se eu colocar aqui Mensagem sucesso.status Então eu vou estar concatenando Eu sei que é muita coisa para gravar Mas você não precisa gravar nada disso aqui O que importa é você estar entendendo Não precisa gravar nada Você só vai guardar as coisas Quando você estiver fazendo prática Quando você estiver fazendo sempre isso aqui Você grava, beleza? Mas não precisa decorar nada aqui O que importa é você entender E aí Esse ponto status, então, é igual a esse ponto ok aqui, só que ele vai ter a função de falar para a gente qual vai ser esse erro.
Se «Erros que passam batido» não caber na agenda, corte escopo de fetch javascript catch erros. Aprendizado curto publicado vence hype longo consumido.
Checklist de robustez
A seção «Checklist de robustez» amarra fetch javascript catch erros a trade-offs reais: o que cortar, o que medir e o que ignorar na primeira semana.
Fala meu amigo, minha amiga, como é que você tá? Meu nome é Gustavo Campelo, esse daqui é o nosso canal, onde a gente fala sobre desenvolvimento web. E no vídeo de hoje você vai aprender sobre Fetch dentro do JavaScript de uma forma bem tranquila, beleza? Eu vou tentar ser o mais didático possível, só pra você entender.
Esse, na verdade, vai ser um corte, tá? De um vídeo do nosso módulo de JavaScript lá da nossa comunidade. Então vocês podem ficar tranquilos, esse aqui parece ser um conhecimento mais complexo, mas é muito de boa. Na última aula a gente estava vendo sobre PROMS, certo?
Chegou lá em uma parte do módulo de PHP também, onde faria sentido eu falar sobre PROMS para vocês. É que ele é baseado em Promise. Então, se você entendeu a última aula, viu certinho, qualquer coisa, revê, você vai entender o FET bem tranquilo. Dei um tapa no microfone aqui.
Feche «Checklist de robustez» com um experimento de 30–90 minutos ligado a fetch javascript catch erros: artefato + critério binário — sem inventar número fora da fonte.
Sinais de que está funcionando
Em «Sinais de que está funcionando», use fetch javascript catch erros como hipótese de trabalho. Escreva a regra em uma frase que outro builder execute sem o vídeo.
O FET é uma forma de você fazer requisição HTTP no JavaScript. Acho que a gente já falou sobre isso, mas só para relembrar. Seria uma requisição que o navegador faz ao servidor. Pegar dados de um servidor ou para enviar dados.
Então essa comunicação seria uma requisição HTTP. E a gente faz isso no JavaScript. O método mais moderno e utilizado, recomendado, é o método FET. Você já deve ter ouvido falar.
Mas o AJAX é um método mais antigo de fazer requisição também. Ele usa o HTTP XML Request. Estou aqui no Visual Studio Code, vamos criar aqui um arquivinho, script.js, então eu vou chamar aqui ele de Fetch.js. O que era a Promise então?
Depois de «Sinais de que está funcionando», anote uma métrica (tempo, taxa, retries ou conversão) para fetch javascript catch erros e rode um ciclo curto antes de escalar.
O que evitar na primeira semana
O bloco «O que evitar na primeira semana» sobre fetch javascript catch erros ganha densidade quando você separa claim da fonte de opinião ornamental — preserve só o acionável.
Para vocês verem que é muito tranquilo. Por exemplo, eu vou criar aqui uma constante, que seria minha promise, beleza? Por exemplo, um if else aqui. Se não, a gente usaria um else aqui.
O else, então, seria o reject, né? E agora, a gente puxaria minha promise, né? Esse minha promise aqui, já que a gente instanciou, então minha promise é um objeto. E a gente teria aqui o den e também a gente teria aqui o catch, né?
Aqui dentro vai aceitar a função, só para que isso fique melhor escrito, a gente faz geralmente assim. Aí a gente poderia ter outros dense também, como a gente já falou, né? E aqui no catch, mesma coisa, né? Mensagem de erro, então, vem utilizado só erro aqui.
Se «O que evitar na primeira semana» não caber na agenda, corte escopo de fetch javascript catch erros. Aprendizado curto publicado vence hype longo consumido.
Na prática
Próximo passo: escolha uma métrica observável e rode um experimento de 7 dias antes de escalar o padrão.