Integração de APIs em Aplicações JavaScript
Ao trabalhar com APIs, os métodos HTTP mais comuns são GET e POST:
- GET: Utilizado para recuperar dados de um servidor;
- POST: Utilizado para enviar dados a um servidor, normalmente ao submeter formulários ou enviar dados em JSON.
Exemplo de Requisição GET
Uma requisição GET busca dados de um servidor sem modificar nenhum recurso.
index.html
index.js
A função fetchPost utiliza o método fetch() para enviar uma requisição a um endpoint especificado (/posts/1). Após o recebimento da resposta, os dados são analisados como JSON, e o título da postagem é extraído e exibido no parágrafo HTML.
Exemplo de Requisição POST
Uma requisição POST envia dados para o servidor, frequentemente utilizada para criar novos recursos ou enviar dados de formulários.
index.html
index.js
A função sendPostRequest faz uma requisição para o endpoint especificado (/posts) com o method definido como 'POST'. Os headers incluem 'Content-Type': 'application/json' para indicar que os dados enviados estão em formato JSON. O body contém dados em formato JSON com detalhes para um novo post, como title, body e userId. Após a requisição, a resposta do servidor é analisada como JSON, e o título do post criado é exibido no HTML.
Envio de Headers e Manipulação de Diferentes Métodos HTTP (GET, POST, PUT, DELETE)
Diferentes métodos HTTP servem a propósitos distintos. Além de GET e POST, métodos comuns incluem:
- PUT: Utilizado para atualizar um recurso existente;
- DELETE: Utilizado para remover um recurso do servidor.
Também é possível enviar headers com qualquer método HTTP para fornecer informações adicionais, como tokens de autenticação ou tipo de conteúdo.
Exemplo de Requisição PUT: Atualizando Dados
index.html
index.js
A função updatePost envia uma requisição PUT para o endpoint especificado (/posts/1) para atualizar um post existente. A requisição inclui method: 'PUT' para indicar a ação de atualização, e os headers são definidos para incluir 'Content-Type': 'application/json', indicando o formato JSON. O body contém dados formatados em JSON, incluindo um id, title atualizado, body e userId. Após o recebimento da resposta, ela é analisada como JSON e o título atualizado é exibido no HTML.
Exemplo de Requisição DELETE: Remoção de Dados
index.html
index.js
A função deletePost envia uma requisição DELETE para um endpoint especificado (/posts/1) para excluir uma postagem específica. O parâmetro method: 'DELETE' especifica a ação. Após a requisição, o status da resposta é verificado com response.ok: se for bem-sucedido, uma mensagem de sucesso ("Post deleted successfully.") é exibida no HTML. Se a exclusão falhar, uma mensagem de erro é exibida em seu lugar.
Utilizando Parâmetros de Consulta em Requisições de API
Parâmetros de consulta permitem enviar informações adicionais na URL, como filtrar dados, ordenar resultados ou especificar números de página em respostas paginadas.
Requisição GET com Parâmetros de Consulta
index.html
index.js
A função fetchPostsByUser envia uma solicitação para um endpoint de API com um parâmetro de consulta (userId=1), que filtra os posts apenas para aqueles pertencentes ao usuário especificado. O userId é adicionado diretamente à URL como um parâmetro de consulta. Após receber os dados filtrados, a função exibe a quantidade de posts encontrados para esse usuário no HTML.
1. Qual método HTTP deve ser utilizado para buscar dados de um servidor sem modificar nenhum recurso?
2. Qual das opções a seguir confirma uma solicitação DELETE bem-sucedida?
Obrigado pelo seu feedback!
Pergunte à IA
Pergunte à IA
Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo
Awesome!
Completion rate improved to 2.22
Integração de APIs em Aplicações JavaScript
Deslize para mostrar o menu
Ao trabalhar com APIs, os métodos HTTP mais comuns são GET e POST:
- GET: Utilizado para recuperar dados de um servidor;
- POST: Utilizado para enviar dados a um servidor, normalmente ao submeter formulários ou enviar dados em JSON.
Exemplo de Requisição GET
Uma requisição GET busca dados de um servidor sem modificar nenhum recurso.
index.html
index.js
A função fetchPost utiliza o método fetch() para enviar uma requisição a um endpoint especificado (/posts/1). Após o recebimento da resposta, os dados são analisados como JSON, e o título da postagem é extraído e exibido no parágrafo HTML.
Exemplo de Requisição POST
Uma requisição POST envia dados para o servidor, frequentemente utilizada para criar novos recursos ou enviar dados de formulários.
index.html
index.js
A função sendPostRequest faz uma requisição para o endpoint especificado (/posts) com o method definido como 'POST'. Os headers incluem 'Content-Type': 'application/json' para indicar que os dados enviados estão em formato JSON. O body contém dados em formato JSON com detalhes para um novo post, como title, body e userId. Após a requisição, a resposta do servidor é analisada como JSON, e o título do post criado é exibido no HTML.
Envio de Headers e Manipulação de Diferentes Métodos HTTP (GET, POST, PUT, DELETE)
Diferentes métodos HTTP servem a propósitos distintos. Além de GET e POST, métodos comuns incluem:
- PUT: Utilizado para atualizar um recurso existente;
- DELETE: Utilizado para remover um recurso do servidor.
Também é possível enviar headers com qualquer método HTTP para fornecer informações adicionais, como tokens de autenticação ou tipo de conteúdo.
Exemplo de Requisição PUT: Atualizando Dados
index.html
index.js
A função updatePost envia uma requisição PUT para o endpoint especificado (/posts/1) para atualizar um post existente. A requisição inclui method: 'PUT' para indicar a ação de atualização, e os headers são definidos para incluir 'Content-Type': 'application/json', indicando o formato JSON. O body contém dados formatados em JSON, incluindo um id, title atualizado, body e userId. Após o recebimento da resposta, ela é analisada como JSON e o título atualizado é exibido no HTML.
Exemplo de Requisição DELETE: Remoção de Dados
index.html
index.js
A função deletePost envia uma requisição DELETE para um endpoint especificado (/posts/1) para excluir uma postagem específica. O parâmetro method: 'DELETE' especifica a ação. Após a requisição, o status da resposta é verificado com response.ok: se for bem-sucedido, uma mensagem de sucesso ("Post deleted successfully.") é exibida no HTML. Se a exclusão falhar, uma mensagem de erro é exibida em seu lugar.
Utilizando Parâmetros de Consulta em Requisições de API
Parâmetros de consulta permitem enviar informações adicionais na URL, como filtrar dados, ordenar resultados ou especificar números de página em respostas paginadas.
Requisição GET com Parâmetros de Consulta
index.html
index.js
A função fetchPostsByUser envia uma solicitação para um endpoint de API com um parâmetro de consulta (userId=1), que filtra os posts apenas para aqueles pertencentes ao usuário especificado. O userId é adicionado diretamente à URL como um parâmetro de consulta. Após receber os dados filtrados, a função exibe a quantidade de posts encontrados para esse usuário no HTML.
1. Qual método HTTP deve ser utilizado para buscar dados de um servidor sem modificar nenhum recurso?
2. Qual das opções a seguir confirma uma solicitação DELETE bem-sucedida?
Obrigado pelo seu feedback!