O que é uma API e como interagimos com ela?

No desenvolvimento web, as APIs permitem que seu código JavaScript interaja com serviços externos, como buscar dados de um servidor, enviar dados de formulários ou integrar serviços de terceiros.

Em aplicações JavaScript modernas, as APIs são frequentemente utilizadas para:

• Buscar dados de um servidor (por exemplo, obter dados meteorológicos, artigos de notícias ou detalhes de produtos);
• Enviar dados para um servidor (por exemplo, enviar um formulário ou salvar preferências do usuário);
• Trabalhar com serviços de terceiros (por exemplo, Google Maps, API do Twitter, gateways de pagamento).

Interagimos com APIs enviando requisições HTTP para um endpoint da API, e o servidor responde com dados, normalmente no formato JSON.

Envio de Requisições HTTP Usando fetch()

A função fetch() é uma forma moderna de realizar requisições de rede em JavaScript. Ela retorna uma Promise, que é resolvida quando a requisição é concluída.

Este exemplo ilustra como realizar uma requisição HTTP GET para uma API utilizando fetch(). A função fetchData envia uma solicitação para o endpoint especificado (https://jsonplaceholder.typicode.com/posts/1). Após receber a resposta, response.json() analisa os dados em JSON. O título da postagem é então extraído dos dados analisados e exibido no parágrafo HTML.

Manipulação de Respostas de API: Análise de JSON e Verificação do Status da Resposta

Após enviar uma solicitação para a API, é importante verificar se a requisição foi bem-sucedida e tratar a resposta adequadamente. Na maioria dos casos, os dados retornados por uma API estão no formato JSON, portanto, é necessário analisá-los utilizando response.json().

Além disso, sempre verifique o status da resposta para garantir que a solicitação foi bem-sucedida (código de status 200–299).

Este exemplo demonstra como lidar com o status de resposta de uma requisição de API. A função fetchAndCheckStatus envia uma requisição para um endpoint de API e, em seguida, verifica se a resposta foi bem-sucedida utilizando response.ok, que retorna true para códigos de status na faixa de 200–299. Se a requisição for bem-sucedida, os dados JSON são analisados e exibidos. Se a requisição falhar, o código de status de erro é mostrado no HTML.

Tratamento de Erros com APIs e Gerenciamento de Falhas de Rede

Ao trabalhar com APIs, é fundamental tratar possíveis erros, como:

• Falhas de rede: O servidor pode estar inacessível devido a problemas de conexão;
• Respostas inválidas: A API pode retornar um erro (por exemplo, 404 Not Found ou 500 Server Error).

É possível tratar erros utilizando try...catch juntamente com fetch() para gerenciar tanto erros de rede quanto erros de resposta da API.

Este exemplo demonstra como lidar com erros de API de forma eficaz. A função fetchWithErrorHandling utiliza try...catch para gerenciar tanto erros de rede quanto respostas inválidas da API. Se a solicitação para a URL inválida falhar, ou se o código de status da resposta estiver fora do intervalo 200–299, um erro é lançado com uma mensagem específica. O bloco catch então exibe a mensagem de erro no HTML. Este método garante que quaisquer problemas com a chamada de API, como um endpoint incorreto ou problemas de conectividade, sejam tratados de maneira adequada e comunicados claramente ao usuário.