Fetch API

Trata-se de uma função integrada no JavaScript usada para fazer requisições HTTP de maneira assíncrona. Ele permite que o navegador se comunique com servidores para buscar ou enviar dados sem precisar recarregar a página.

Funcionamento ⚙️

A fetch() realiza uma requisição HTTP e sempre devolve uma Promise. Essa Promise vai "esperar" até o servidor responder e, quando isso acontece, a Promise é resolvida com um objeto especial chamado Response. Esse objeto Response carrega várias informações sobre o resultado da requisição.

O conteúdo do response compreende:

💡 Status da resposta | Propriedade ok | Conteúdo da resposta

Onde:

Status da resposta → O Response inclui um código de status. Esses códigos informam se a requisição foi bem-sucedida ou teve algum problema.

response.ok → Propriedade booleana (true ou false) que ajuda a verificar se a requisição foi bem-sucedida. Será true para códigos de status entre 200 e 299, e false para demais códigos.

Conteúdo da Resposta → Os dados solicitados na requisição ficam "guardados" dentro do Response, mas precisam ser processados. Para isto, podem ser usados o response.json() (para dados em formato JSON) ou response.text() (para texto simples) para extrair esses dados do Response.

Métodos de Tratamento de Resposta 🔀

São responsáveis por gerenciar o resultado de uma Promise. Esses métodos são fundamentais para o fluxo assíncrono, permitindo controlar tanto o sucesso quanto o erro na requisição e mantendo o código organizado.

Vejamos abaixo:

.then(): Método de processamento de sucesso. Esse método é chamado quando a Promise é resolvida com sucesso, ou seja, quando a requisição recebe uma resposta sem erros. Aqui, podemos processar e manipular os dados recebidos.

.catch(): Método de tratamento de erro. Chamado quando a Promise é rejeitada, ou seja, quando há falha na requisição ou outro erro ocorre. Aqui, lidamos com qualquer problema, como falta de conexão, URL incorreta ou resposta não encontrada.

Exemplo de uma requisição usando fetch: