Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprenda Integração de APIs em Aplicações JavaScript | JavaScript Assíncrono e Integração de API
Domínio Avançado de JavaScript

bookIntegraçã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.html

index.js

index.js

copy

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.html

index.js

index.js

copy

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.html

index.js

index.js

copy

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.html

index.js

index.js

copy

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.html

index.js

index.js

copy

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?

question mark

Qual método HTTP deve ser utilizado para buscar dados de um servidor sem modificar nenhum recurso?

Select the correct answer

question mark

Qual das opções a seguir confirma uma solicitação DELETE bem-sucedida?

Select the correct answer

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 4. Capítulo 6

Pergunte à IA

expand

Pergunte à IA

ChatGPT

Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo

Awesome!

Completion rate improved to 2.22

bookIntegraçã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.html

index.js

index.js

copy

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.html

index.js

index.js

copy

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.html

index.js

index.js

copy

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.html

index.js

index.js

copy

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.html

index.js

index.js

copy

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?

question mark

Qual método HTTP deve ser utilizado para buscar dados de um servidor sem modificar nenhum recurso?

Select the correct answer

question mark

Qual das opções a seguir confirma uma solicitação DELETE bem-sucedida?

Select the correct answer

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 4. Capítulo 6
some-alt