Requisições POST - Angular

Além das requisições GET, o Angular permite enviar outros tipos de requisições, como POST, PUT e DELETE. Vamos ver como realizar requisições POST.

Aplicação Node.js no lado do servidor

Primeiro, definiremos uma aplicação web Node.js que, no lado do servidor, receberá as requisições da nossa aplicação Angular. Todo o código da aplicação Node.js é o seguinte:

const express = require("express");

const app = express();

// criamos um parser para dados no formato JSON
const jsonParser = express.json();

// configuração de CORS
app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    res.header("Access-Control-Allow-Methods", "GET, PATCH, PUT, POST, DELETE, OPTIONS");
    next();  // passamos o processamento da requisição ao método app.post("/postuser"...
});

// manipulador para a rota localhost:3000/postuser
app.post("/postuser", jsonParser, function (request, response) {

    // se não forem fornecidos dados, retornamos um erro
    if(!request.body) return response.sendStatus(400);

    // obtemos os dados
    let username = request.body.name;
    let userage = request.body.age;
    // simulamos algum processamento de dados, por exemplo, alteramos o valor de userage
    userage = userage + 10;

    // envio dos dados de volta para o cliente
    response.json({"name": username, "age": userage});
});

app.listen(3000, () => console.log("Servidor iniciado em http://localhost:3000/"));

A aplicação utiliza o framework Express, então é necessário instalar o pacote "express" para que ela funcione.

A aplicação irá processar requisições no endereço http://localhost:3000/postuser. Pressupõe-se que o servidor receberá um objeto com dois campos: name e age (por exemplo, {name: "Tom", age: 25}). Após receber os dados, o servidor realizará um processamento simples: incrementará o valor do campo age em 10. Em seguida, o objeto alterado será enviado de volta para a aplicação Angular.

Aplicação Angular no lado do cliente

Vamos considerar a seguinte estrutura de projeto Angular:

helloapp/
├── src/
│   ├── app/
│   │   ├── app.component.ts
│   │   ├── http.service.ts 
│   │   ├── user.ts 
│   ├── main.ts
│   ├── index.html
├── angular.json
├── package-lock.json
├── package.json
└── tsconfig.json

No arquivo user.ts, definimos a classe User, que representa os dados enviados e recebidos:

export class User { 
    constructor(public name: string, public age: number) {}
}

Em seguida, no arquivo http.service.ts, definimos um serviço para enviar os dados:

import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { User } from "./user";

@Injectable()
export class HttpService {

    constructor(private http: HttpClient){ }

    postData(user: User){

        const body = {name: user.name, age: user.age};
        return this.http.post("http://localhost:3000/postuser", body);
    }
}

Aqui, o método postData recebe um objeto User para ser enviado. Os dados a serem enviados são representados pelo objeto body. Para o envio, usamos o método http.post(), passando o endereço do servidor e o objeto a ser enviado.

Ao enviar a requisição de um domínio diferente, é importante não esquecer das restrições de requisições entre domínios (CORS). Por isso, para testes, independentemente da tecnologia do servidor, a funcionalidade CORS deve estar ativada na aplicação do servidor. Caso contrário, a aplicação Angular não conseguirá obter o resultado.

Vamos aplicar o serviço no código do componente:

import { Component } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { HttpService } from "./http.service";
import { CommonModule } from '@angular/common';
import { User } from "./user";

@Component({
    selector: "my-app",
    standalone: true,
    imports: [FormsModule, CommonModule],
    template: `<div>
                <p>
                    <label>Nome</label><br>
                    <input name="username" [(ngModel)]="user.name" />
                </p>
                <p>
                    <label>Idade</label><br>
                    <input type="number" name="age" [(ngModel)]="user.age" />
                </p>
                    <button class="btn btn-default" (click)="submit(user)">Enviar</button>
                </div>
                <div *ngIf="done">
                    <h3>Resposta do servidor</h3>
                    <div>
                        Nome: {{receivedUser?.name}}<br>
                        Idade: {{receivedUser?.age}}
                    </div>
                </div>`,
    providers: [HttpService]
})
export class AppComponent { 

    user: User = new User("", 0); // dados do usuário inserido
    receivedUser: User | undefined; // usuário recebido
    done: boolean = false;
    
    constructor(private httpService: HttpService){}

    submit(user: User){
        this.httpService.postData(user)
            .subscribe({
                next: (data: any) => { this.receivedUser = data; this.done = true; },
                error: error => console.log(error)
            });
    }
}

O template define um formulário de entrada. Ao clicar no botão, os dados são enviados para o servidor, e a resposta recebida é exibida abaixo do formulário.

Envio completo do objeto

O método anterior é útil se precisarmos enviar apenas alguns dados do objeto User ou se houver a necessidade de construir manualmente o objeto a ser enviado. No entanto, também podemos enviar o objeto inteiro:

import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { User } from "./user";

@Injectable()
export class HttpService {

    constructor(private http: HttpClient){ }

    postData(user: User){
        return this.http.post("http://localhost:3000/postuser", user);
    }
}

Também podemos definir vários cabeçalhos no envio com a ajuda do objeto HttpHeaders:

import { Injectable } from "@angular/core";
import { HttpClient, HttpHeaders } from "@angular/common/http";
import { User } from "./user";

@Injectable()
export class HttpService {

    constructor(private http: HttpClient){ }

    postData(user: User){
        const myHeaders = new HttpHeaders().set("Accept", "application/json");
        return this.http.post("http://localhost:3000/postuser", user, { headers: myHeaders });
    }
}