Отправка данных в запросе

В прошлых темах были рассмотрены простейшие запросы к файлу json, который содержал некоторые данные. Однако нередко возникает необходимость обращаться с более сложными запросами к удаленному ресурсу, передавая ему некоторые параметры. Вначале рассмотрим, как передать параметры в get-запросе.

Определение приложения на сервере

Рассмотрим простейшую задачу. Допустим, на стороне сервера действует некоторый обработчик или скрипт, который принимает в качестве параметра два числа и вычисляет их сумму.

В качестве стороны сервера мы могли бы взять разные технологии: PHP, ASP.NET и т.д. В данном случае для тестирования определим небольшое приложение на Node.js, так как данная технология представляет наиболее простейший способ для создания простейшего тестового приложения, да и сам Node.js установлен у всех разработчиков Angular. Приложение будет интуитивно понятным, более же подробно с данной технологией можно ознакомиться в руководстве по Node.js

Определим для приложения Node.js новый каталог где-нибудь на жестком диске. Допустим, это будет каталог C:\node. Далее в этом каталоге определим файл package.json:

{
  "name": "simple-server",
  "version": "1.0.0",
  "dependencies": {
    "express": "5.1.0"
  }
}

Чтобы упростить задачу, наше приложение будет использовать фреймворк Express для обработки запросов. Установим пакеты командой npm install.

C:\WINDOWS\system32>cd C:\node
C:\node>npm install

added 62 packages, and audited 63 packages in 6s

11 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

c:\node>

Далее определим в папке приложения файл app.js - главный файл приложения, который будет содержать следующий код:

const express = require("express");
   
const app = express();
 
// обработчик по маршруту localhost:3000/sum
app.get("/sum", function(request, response){
       
    // получаем параметры из строки запроса и преобразуем в числа
    const number1 = parseInt(request.query.num1);
    const number2 = parseInt(request.query.num2);
 
    // вычисляем сумму
    const sum = number1 + number2;
     
    // настройка заголовков CORS для кроссдоменных запросов
    response.header("Access-Control-Allow-Origin", "*");
    response.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    response.header("Access-Control-Allow-Methods", "GET, PATCH, PUT, POST, DELETE, OPTIONS");
     
    response.send({result: sum});
});
  
app.listen(3000, ()=>console.log("Сервер запущен по адресу http://localhost:3000/"));

Данное приложение будет принимать запросы по адресу "/sum" (app.get("/sum")...). Из строки запроса получаем два параметра num1 и num2 (названия параметров произвольное). Далее конвертируем значения параметров в числа и вычисляем суммму. И возвращаем сумму в виде объекта json {result: sum}.

Поскольку приложение Angular будет разворачиваться на одном домене, а приложение Node.js на другом, то нам необходимо будет настроить CORS - кроссдоменные запросы. Для этого с помощью метода response.header устанавливаются соответствующие заголовки.

В командой строке/консоли перейдем к папке приложения node.js и запустим скрипт с помощью команды node app.js

c:\node>node app.js
Сервер запущен по адресу http://localhost:3000/

Мы можем простестировать приложение в браузере, обратившись к нему с запросом http://localhost:3000/sum?num1=5&num2=9:

Определение клиентского приложения Angular

Для отправки запроса из Angular определим следующий сервис:

import {Injectable} from "@angular/core";
import {HttpClient} from "@angular/common/http";
  
@Injectable()
export class HttpService{
  
    constructor(private http: HttpClient){ }
    getSum(num1: number, num2: number){
        return this.http.get("http://localhost:3000/sum?num1=" + num1 + "&num2=" + num2);
    }
}

Поскольку данные передаются через запрос GET, то мы можем конкатенировать нужное число со строкой запроса.

И определим код компонента:

import { Component} from "@angular/core";
import { FormsModule } from "@angular/forms";
import { HttpService} from "./http.service";

@Component({
    selector: "my-app",
    imports: [FormsModule],
    template: `<div>
                <p>
                    <label>Введите первое число</label><br>
                    <input type="number" name="num1" [(ngModel)]="num1" />
                <p>
                <p>
                    <label>Введите второе число</label><br>
                    <input type="number" name="num2" [(ngModel)]="num2" />
                </p>
                    <button (click)="submit()">Отправить</button>
                </div>
                @if(done){ 
                    <div>Сумма: {{sum}}</div> 
                }
`,
    providers: [HttpService]
})
export class AppComponent { 
    
    num1: number = 0;
    num2: number = 0;
    sum: number | undefined;
    done: boolean = false;
    constructor(private httpService: HttpService){}
    submit(){
        this.httpService.getSum(this.num1, this.num2).subscribe({next:(data:any) => {
            this.sum=data.result; 
            this.done=true;
        }});
    }
}

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

HttpParams

Также для определения параметров в запросе можно использовать класс HttpParams. В частности, изменим сервис HttpService следующим образом:

import {Injectable} from "@angular/core";
import {HttpClient, HttpParams} from "@angular/common/http";
   
@Injectable()
export class HttpService{
     
    constructor(private http: HttpClient){ }
      
    getSum(num1: number, num2: number){
        const params = new HttpParams()
        .set("num1", num1.toString())
        .set("num2", num2.toString());
        return this.http.get("http://localhost:3000/sum", {params});
    }
}

С помощью метода set() объекта HttpParams устанавливаются параметры, и затем этот объект передается в запрос. В итоге результат будет тот же, что и в примере выше.