Request e Response

Nos posts anteriores já falamos sobre back-end, front-end, como eles se comunicam através de uma requisição, e agora você verá um exemplo prático de um request e um response.

Vamos usar o NodeJS, mas não é obrigatório focar nisso, pois depois vou falar exclusivamente sobre ele. Toda vez que você entra em um site, como o google, está fazendo um GET no Google.

Como checar se isso está realmente acontecendo?

No caso do Windows, apertamos F12 usando o Chrome e então irá aparecer esta aba Network:

Perceba que temos várias abas, isso é uma barra de desenvolvimento. A medida que formos avançando iremos passar por algumas delas. O importante para agora é o Network, aperte o F5 e irá aparecer muitas requisições:

Se você clicar em alguma delas, é possível ver tudo sobre ela, e uma das coisas é o request method do tipo GET, qual o servidor, etc. Temos também o response reader logo a baixo:

No caso do GET, não temos um Request Body, mas temos um Response Body, que fica ao lado de preview. Lá seria a pagina inicial do google já retornada para o usuário. Agora vamos fazer o seguinte: quando vier um GET em '/' irei retornar todos os GET's da requisição e os dados de resposta em uma function req e res, pegamos o requests da requisição e devolvo ao cliente.

var express = require ('express');
var app express();
app.get('/', function (req, res){
    //res.send('Esta é uma requisição GET.');
    //res.send(req.query);
    res.send(req.headers);
});

Quando rodarmos o exemplo irá aparecer o seguinte:

Mostrando todos os Headers que eu solicitei.

Lembrando que, quando temos um request/response, sempre temos um cabeçalho para cada. Dependendo da requisição. podemos ter o body ou não. Também há outros tipos de requisição, como é o caso do POST. Nele podemos fazer a mesma coisa, porém com uma diferença: não conseguimos fazer no mesmo nível do GET pelo navegador. Vou mostrar agora o Postman, que permite que a gente faça um POST. Vamos então fazer um POST em /users:

var express = require ('express');
var app express();
app.post('/users', function(req,res){
    res.send(req.headers);
    req.on('data', function(chunk){
        //res.send(chunk);
    });
});

Vamos mandar para https://localhost:3000/users o tipo de requisição, no caso o POST, e um raw, ou seja, um texto puro.

Em Text, selecionamos JSON e ele já troca o cabeçalho de solicitação para JSON. Apertamos o Send, e a resposta que vem são os cabeçalhos do request.

Note que o content-length retornou 20 bytes, pois estou enviando 20 bytes de dados, diferente do anterior onde não estou enviando nada. Lembrando que no post eu tenho o body da minha requisição. O básico de uma aplicação WEB sempre funciona dessa forma, então o front-end faz uma request e recebe uma resposta.

Assista ao vídeo da explicação:

Deixe suas dúvidas e sugestões nos comentários. Curta o DevPleno no Facebook, inscreva-se no canal e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!