Comunicação entre Frontend e Backend: Como os Dados Trafegam em uma Aplicação Web

1. Montagem dos Dados no Frontend

Tudo começa no frontend, onde os dados inseridos ou gerados pelo usuário são organizados em estruturas do JavaScript, como objetos e arrays. Esses dados podem vir de um formulário de cadastro, de parâmetros de filtro ou de qualquer outra interação do usuário.

Exemplo em JavaScript:

const dados = {
  nome: 'Ana',
  email: 'ana@email.com',
  idade: 28
};

2. Conversão para JSON e Envio da Requisição

Antes de serem transmitidos, os dados precisam ser convertidos para o formato JSON (JavaScript Object Notation), um padrão leve e amplamente utilizado para troca de informações entre sistemas. No JavaScript, isso é feito com o método JSON.stringify().

A requisição é então enviada ao servidor por meio de bibliotecas ou APIs específicas. As mais comuns são:

• fetch(): API nativa do JavaScript, integrada ao navegador;
• axios: biblioteca externa que oferece sintaxe simplificada e recursos adicionais.

Exemplo com fetch:

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

3. Recebimento e Validação no Backend

No servidor, a requisição é recebida pelo Django, que utiliza o Serializer do Django REST Framework para realizar duas tarefas essenciais:

• Validação: garantir que os dados estejam no formato esperado e atendam às regras definidas;
• Conversão: transformar o JSON recebido em objetos Python compreensíveis pelo backend.

Exemplo de Serializer no Django:

class UsuarioSerializer(serializers.Serializer):
  nome = serializers.CharField(max_length=100)
  email = serializers.EmailField()
  idade = serializers.IntegerField(min_value=0)

Somente após a validação bem-sucedida os dados seguem para o processamento, como a gravação em banco de dados ou a execução de regras de negócio.

4. Retorno da Resposta e Código de Status HTTP

Concluído o processamento, o backend devolve uma resposta ao frontend, também em JSON, acompanhada de um código de status HTTP, que informa o resultado da operação de forma padronizada.

Entre os códigos mais utilizados estão:

• 200 (OK): requisição processada com sucesso;
• 201 (Created): novo recurso criado com sucesso;
• 400 (Bad Request): dados inválidos ou incompletos.

Exemplo de resposta JSON:

{
  "mensagem": "Usuário criado com sucesso",
  "id": 42
}

5. Interpretação da Resposta e Atualização da Interface

Por fim, o frontend recebe a resposta, interpreta o código de status e o conteúdo retornado, e atualiza a interface de acordo com o resultado obtido.

É nesse momento que o usuário visualiza o efeito da sua ação — seja uma mensagem de confirmação, um erro ou a atualização de uma lista de dados na tela.

Exemplo com fetch e tratamento da resposta:

fetch('/api/usuarios', { /* ... */ })
  .then(resposta => {
    if (resposta.ok) {
      return resposta.json();
    } else {
      throw new Error('Erro na requisição');
    }
  })
  .then(dados => {
    exibirMensagem('Usuário cadastrado com sucesso!');
  })
  .catch(erro => {
    exibirMensagem('Erro ao cadastrar usuário.');
  });