POST-запросы

Кроме GET-запросов Angular позволяет отправлять остальные типы запросов: POST, PUT, DELETE. Рассмотрим, как выполнять POST-запросы.

Приложение Node.js на стороне сервера

Сначала определим веб-приложение Node.js, которое будет на стороне сервера получать запросы от нашего Angular-приложения. Весь код приложения:

const express = require("express");
  
const app = express();
  
// создаем парсер для данных в формате json
const jsonParser = express.json();

// настройка 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();	// передаем обработку запроса методу app.post("/postuser"...
 });
 
// обработчик по маршруту localhost:3000/postuser
app.post("/postuser", jsonParser, function (request, response) {

	// если не переданы данные, возвращаем ошибку
    if(!request.body) return response.sendStatus(400);
	
	// получаем данные
	let username = request.body.name;
	let userage = request.body.age;
	// имитируем некоторую обработку данных, например, изменим значение userage
	userage = userage + 10;
	
	// отправка данных обратно клиенту
    response.json({"name": username, "age": userage});
});
 
app.listen(3000, ()=>console.log("Сервер запущен по адресу http://localhost:3000/"));

Приложение использует фреймворк Express, поэтому для его работы необходимо установить пакет "express".

Приложение будет обрабатывать запросы по адресу http://localhost:3000/postuser. Предполагается, что серверу будет приходить некий объект, у которого есть два поля: name и age (например, {name: "Tom", age: 25}). После получения данных сервер сделает некоторую обработку: для простоты будем увеличивать значение поля age на 10. И затем отправим измененый объект обратно приложению Angular.

Приложение Angular на стороне клиента

Пусть у нас есть следующая структура проекта Angular:

В файле user.ts определен класс User, который представляет отправляемые и получаемые данные:

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

Далее в файле http.service.ts определим сервис для отправки данных:

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); 
    }
}

Здесь определен метод postData, который получает для отправки объект User. Сами отправляемые данные представляют объект body. Для отправки применяется метод http.post(), в который передается адрес сервера и отправляемый объект.

При отправке запроса из другого домена опять же следует не забывать про ограничения кроссдоменных запросов. Поэтому для тестирования вне зависимости от технологии сервера, для серверного приложения должна быть включена функциональность CORS. Иначе наше приложение на Angular не сможет получить результат обработки.

Применим сервис в коде компонента:

import { Component} from "@angular/core";
import { HttpClientModule} from "@angular/common/http";
import { FormsModule } from "@angular/forms";

import { HttpService} from "./http.service";
import { User } from "./user";

@Component({
    selector: "my-app",
    standalone: true,
    imports: [HttpClientModule, FormsModule],
    template: `<div>
                <p>
                    <label>Имя</label><br>
                    <input name="username" [(ngModel)]="user.name" />
                </p>
                <p>
                    <label>Возраст</label><br>
                    <input type="number" name="age" [(ngModel)]="user.age" />
                </p>
                    <button class="btn btn-default" (click)="submit(user)">Отправить</button>
                </div>
                @if(done){
                    <h3>Ответ сервера</h3>
                    <div>
                        Имя: {{receivedUser?.name}}<br>
                        Возраст: {{receivedUser?.age}}
                    </div>
                }`,
    providers: [HttpService]
})
export class AppComponent { 
   
    user: User=new User("", 0); // данные вводимого пользователя
       
    receivedUser: User | undefined; // полученный пользователь
    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)
                });
    }
}

В шаблоне определена форма ввода. По нажатию на кнопку данные отправляются на сервер, а полученный ответ отображается под формой:

При получении данных с сервера следует учитывать регистр свойств. Как правило, для свойств класса в TypeScript применяется camelCase. В некоторых языках программирования, например, в C#, для названий свойств класса используется PascalCase. Поэтому либо на стороне сервера следует сериализовать объект, у которого названия свойств применяют camelCase, либо на стороне клиента при получении данных следует проводить постобработку результатов запроса для приведения их в нужную форму.

Выше предложенный способ подходит, если, скажем, нам надо отправлять не все данные из объекта User или если возникает необходимость вручную сконструировать отправляемый объект. Но также для отправки можно передать весь объект:

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); 
    }
}

Также при отправке мы можем устанавливать различные заголовки с помощью объекта 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}); 
    }
}