API 101

Apenas um introdução inicial pra começar

Quem sou eu?

AGENDA

• O básico
• Anatomia de uma URL
• Comunicação
• Request
• Response
• Anatomia da Request/Response
• Tipos de Status Code
• Tipos de HTTP Verbos

Anatomia de uma URL

Exemplo:
https://api.exemplo.com/v1/users?id=123

• Protocol(o): https
• Domínio/Domain: api.exemplo.com
• Caminho/Path/Endpoint: /v1/users
• Query String/Parameters: ?id=123

O que é Request?

É a requisição enviada pelo cliente para o servidor.

fetch('https://api.exemplo.com/v1/users')
				.then(response => response.json())
				.then(data => console.log(data));
					

O que é Response?

É a resposta enviada pelo servidor para o cliente.

{
	"id": 123,
	"name": "Filomena",
	"age": 30
}
					

Conteúdo da Request/Response

• Body: Dados enviados ou recebidos.
• Header: Metadados da comunicação (Content-Type, Authorization, etc).
• Status: Código da resposta (200, 404, 500, etc).
• Content-Type: Tipo de conteúdo (JSON, HTML, etc).
• Size: Tamanho do payload.
• Time: Tempo de resposta.

Tipos de Status Code

• 1xx: Informativo
• 2xx: Sucesso (ex: 200 OK)
• 3xx: Redirecionamento (ex: 301 Moved Permanently)
• 4xx: Erro do Cliente (ex: 404 Not Found)
• 5xx: Erro do Servidor (ex: 500 Internal Server Error)

Status Codes - Sucesso (2xx)

Indicam que a requisição foi bem-sucedida.

• 200 OK: Requisição bem-sucedida (ex: fetch GET).
• 201 Created: Recurso criado com sucesso (ex: fetch POST).
• 204 No Content: Requisição bem-sucedida, mas sem conteúdo retornado (ex: DELETE).

fetch('https://api.exemplo.com/v1/users')
	.then(response => {
		if (response.ok) {
			return response.json();
		}
		throw new Error('Erro na requisição');
	})
	.then(data => console.log(data))
	.catch(error => console.error(error));
						

Status Codes - Erros do Cliente (4xx)

Indicam que houve um problema com a requisição feita pelo cliente.

• 400 Bad Request: A requisição está incorreta ou malformada.
• 401 Unauthorized: Necessário autenticação para acessar o recurso.
• 404 Not Found: O recurso solicitado não foi encontrado.

fetch('https://api.exemplo.com/v1/users/999')
	.then(response => {
		if (!response.ok) {
			throw new Error(`Erro ${response.status}: Recurso não encontrado`);
		}
		return response.json();
	})
	.then(data => console.log(data))
	.catch(error => console.error(error));
						

Status Codes - Erros do Servidor (5xx)

Indicam que houve um problema no servidor ao processar a requisição.

• 500 Internal Server Error: Ocorreu um erro inesperado no servidor.
• 502 Bad Gateway: O servidor recebeu uma resposta inválida.
• 503 Service Unavailable: O servidor está temporariamente indisponível.

fetch('https://api.exemplo.com/v1/users')
	.then(response => {
		if (!response.ok) {
			throw new Error(`Erro ${response.status}: Problema no servidor`);
		}
		return response.json();
	})
	.then(data => console.log(data))
	.catch(error => console.error(error));
						

Tipos de Verbos HTTP

• GET: Busca dados (ex: fetch())
• POST: Envia dados (ex: fetch() com body)
• PUT: Atualiza dados completos
• PATCH: Atualiza dados parciais
• DELETE: Remove dados

Exemplo Dinâmico - GET

const userId = 123;

fetch(`https://api.exemplo.com/v1/users?id=${userId}`)
	.then(response => response.json())
	.then(data => console.log(data));
					

Exemplo Prático - POST

fetch('https://api.exemplo.com/v1/users', {
			  method: 'POST',
			  headers: {
				'Content-Type': 'application/json',
				'Authorization': 'Bearer seu_token_aqui'
			  },
			  body: JSON.stringify({ name: 'Jessica', age: 30 })
			})
			.then(response => response.json())
			.then(data => console.log(data))
			.catch(error => console.error('Erro:', error));
					

DÚVIDAS?