← Voltar para a trilha Central de Quizzes

Quiz da Trilha: Consumo de APIs

Guia prático para trainees: requisições HTTP, JSON, Fetch API, autenticação com Bearer Token, CORS e Http Client no Laravel.

20 questões 0 de 20 respondida(s)

Questão 1 de 20

Em uma integração com API REST, qual é a principal função de um endpoint e do formato JSON?

Permitir que cliente e servidor troquem dados estruturados via HTTP sem expor o banco de dados diretamente. Compilar o código PHP diretamente dentro do navegador do usuário. Substituir o CSS e o HTML na renderização visual da página.

Questão 2 de 20

Qual método HTTP é o mais adequado para enviar dados no body e criar um novo recurso em uma API REST?

GET POST DELETE HEAD

Questão 3 de 20

Ao enviar um formulário de cadastro para uma API Laravel e receber o status 422, o que aconteceu?

O servidor caiu por falta de memória. O servidor entendeu a requisição, mas houve erro de validação nos dados enviados. O recurso foi criado com sucesso e redirecionado. O endpoint solicitado não existe na API.

Questão 4 de 20

Qual a diferença entre os status HTTP 401 e 403 ao consumir uma API?

401 indica que a URL não existe; 403 indica que o JSON está inválido. 401 indica falta de autenticação (não identificado); 403 indica usuário autenticado, porém sem permissão. 401 é erro do servidor; 403 é sucesso parcial.

Questão 5 de 20

Ao enviar um objeto JSON no body de uma requisição POST, qual header informa à API que o payload está em JSON?

Content-Type: application/json Cache-Control: no-store Access-Control-Allow-Origin: *

Questão 6 de 20

Qual é uma pegadinha clássica da Fetch API em JavaScript quando o servidor responde com status 404 ou 500?

O fetch() converte automaticamente o erro em null sem retornar Promise. O fetch() não rejeita a Promise nem entra no catch; é preciso verificar response.ok. O fetch() recarrega a página inteira automaticamente.

Questão 7 de 20

Por que nunca devemos colocar uma API Key secreta diretamente no JavaScript do front-end?

Porque o JavaScript não suporta strings longas em headers HTTP. Porque qualquer usuário pode abrir o DevTools / código-fonte no navegador e copiar sua chave. Porque navegadores bloqueiam qualquer requisição com headers personalizados.

Questão 8 de 20

Uma rota de API funciona perfeitamente no Insomnia/Postman, mas gera erro de CORS no navegador. Por quê?

Porque o CORS é uma política de segurança aplicada apenas pelos navegadores quando há origens diferentes sem autorização do servidor. Porque o Insomnia ignora erros 500 do servidor. Porque o navegador só aceita respostas em XML e não em JSON.

Questão 9 de 20

Ao integrar com uma API externa e receber o status 429 Too Many Requests, o que está acontecendo?

O JSON enviado ultrapassou 429 linhas. Sua aplicação excedeu o limite de requisições por minuto/segundo (Rate Limit) da API. O servidor retornou 429 registros na paginação.

Questão 10 de 20

Ao consumir uma API externa no Laravel usando a facade Http, por que é importante configurar ->timeout(5)?

Para limitar a resposta a no máximo 5 registros por página. Para evitar que uma API externa lenta ou fora do ar deixe a requisição PHP travada indefinidamente. Para converter automaticamente erros 404 em 200 OK.

Questão 11 de 20

Um trainee escreveu o código abaixo, mas sempre recebe "Promise {}" no console. Qual é o erro?

javascript

async function buscarNota() {
  const res = await fetch('/api/notas/1');
  const dados = res.json();
  console.log(dados);
}

Faltou usar await em res.json(), pois converter o corpo para JSON também é assíncrono. A função fetch() não pode ser usada dentro de funções async. Deveria ter usado JSON.parse(res) em vez de res.json().

Questão 12 de 20

Compare os dois blocos abaixo. Quando escolher a Opção B (PATCH) em vez da Opção A (PUT)?

javascript

// Opção A (PUT)
fetch('/api/membros/7', {
  method: 'PUT',
  body: JSON.stringify({ nome: 'Ana', email: 'ana@code.br', papel: 'editor', ativo: true })
});

// Opção B (PATCH)
fetch('/api/membros/7', {
  method: 'PATCH',
  body: JSON.stringify({ papel: 'admin' })
});

Quando você quer atualizar apenas um ou alguns campos sem precisar reenviar o objeto completo. Quando você quer criar um usuário novo do zero no banco. Quando a API não aceita JSON e só aceita XML.

Questão 13 de 20

Ao enviar um POST para uma API Laravel com o código abaixo, por que o servidor devolveu uma página HTML de erro/login em vez de JSON?

javascript

await fetch('/api/notas', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ title: '' })
});

Porque faltou o header Accept: application/json para avisar o Laravel que o cliente espera resposta em JSON. Porque o método POST não suporta body no navegador. Porque JSON.stringify() converte o objeto para HTML automaticamente.

Questão 14 de 20

Compare as duas chamadas GET abaixo. Por que a Opção B é mais segura que a Opção A ao montar filtros de busca?

javascript

// Opção A
fetch(`/api/notas?busca=${texto}&tag=${tag}`);

// Opção B
const url = new URL('/api/notas', window.location.origin);
url.searchParams.set('busca', texto);
url.searchParams.set('tag', tag);
fetch(url);

A Opção B faz o encode automático de espaços e caracteres especiais (&, ?, =, acentos) na URL. A Opção B envia os dados escondidos dentro do body da requisição GET. A Opção A não funciona em requisições assíncronas com await.

Questão 15 de 20

Compare o tempo de execução dos dois jeitos de buscar dois endpoints independentes. O que muda na Opção B?

javascript

// Opção A
const trilhas = await fetch('/api/trilhas').then(r => r.json());
const tags = await fetch('/api/tags').then(r => r.json());

// Opção B
const [trilhas, tags] = await Promise.all([
  fetch('/api/trilhas').then(r => r.json()),
  fetch('/api/tags').then(r => r.json()),
]);

Na Opção B as duas requisições rodam em paralelo, reduzindo o tempo total de espera. Na Opção B a segunda requisição só começa depois que a primeira termina. Na Opção A as respostas voltam sempre em ordem alfabética.

Questão 16 de 20

Analise a resposta HTTP capturada na aba Network do DevTools. O que você deve investigar primeiro?

http

POST https://api.codejr.com.br/api/projetos  ->  422 Unprocessable Content

{
  "message": "O campo prazo é obrigatório.",
  "errors": {
    "prazo": ["O campo prazo é obrigatório."]
  }
}

Verificar o payload enviado pelo front-end, pois o campo "prazo" faltou ou falhou na validação. Reiniciar o servidor MySQL, pois 422 significa queda do banco de dados. Trocar o método de POST para GET para evitar a validação.

Questão 17 de 20

Compare as duas formas de configurar o token no Laravel. Por que a Opção A é uma má prática perigosa?

php

// Opção A
Http::withToken(env('GITHUB_TOKEN'))->get('https://api.github.com/user');

// Opção B
Http::withToken(config('services.github.token'))->timeout(5)->get('https://api.github.com/user');

Porque quando o Laravel roda config:cache em produção, env() fora de config/*.php passa a retornar null. Porque env() só funciona para senhas numéricas e não para strings. Porque config() envia o token criptografado em SHA-256 na URL.

Questão 18 de 20

O que o código Laravel abaixo faz caso a API externa retorne status 500 ou falhe na conexão?

php

$response = Http::acceptJson()
    ->timeout(5)
    ->retry(2, 200)
    ->get('https://api.exemplo.com/clima');

if ($response->failed()) {
    return ['erro' => 'Serviço indisponível'];
}

Tenta até 2 vezes com 200ms de pausa e, se ainda falhar, retorna a mensagem amigável sem quebrar a página. Ignora o status 500 e grava "Serviço indisponível" no banco automaticamente. Redireciona o usuário para https://api.exemplo.com/clima.

Questão 19 de 20

Observe o JSON paginado retornado pela API. Como exibir apenas os títulos das notas no front-end?

json

{
  "data": [
    { "id": 1, "title": "CRUD" },
    { "id": 2, "title": "Fetch API" }
  ],
  "meta": { "current_page": 1, "last_page": 4, "total": 40 }
}

Fazer resposta.map(...) diretamente em resposta, pois o JSON já é um array. Iterar sobre resposta.data (ex.: resposta.data.map(...)), pois a raiz é um objeto com data e meta. Acessar resposta.meta[0].title.

Questão 20 de 20

Compare o fluxo: quando vale mais a pena consumir uma API pelo Back-End (Laravel) em vez do Front-End (fetch no browser)?

javascript

// Fluxo A (Browser -> API Externa)
fetch('https://api-pagamento.com/v1/cobrar', { headers: { Authorization: 'Bearer sk_live_123' } });

// Fluxo B (Browser -> Seu Laravel -> API Externa)
fetch('/pagamentos', { method: 'POST', body: JSON.stringify({ planoId: 2 }) });

Pelo Back-End (Fluxo B) sempre que envolver chaves secretas, regras de negócio críticas ou APIs que bloqueiam CORS. Sempre pelo Front-End (Fluxo A), porque o navegador esconde automaticamente o header Authorization no DevTools. Nunca pelo Back-End, pois o PHP não consegue fazer requisições HTTP.

Ao enviar, você verá sua pontuação e a explicação de cada questão.