В прошлых темах были рассмотрены простейшие запросы к файлу 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": "4.18.2" } }
Чтобы упростить задачу, наше приложение будет использовать фреймворк 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 определим следующий сервис:
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 { HttpClientModule} from "@angular/common/http"; import { FormsModule } from "@angular/forms"; import { HttpService} from "./http.service"; @Component({ selector: "my-app", standalone: true, imports: [HttpClientModule, 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. В частности, изменим сервис 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 устанавливаются параметры, и затем этот объект передается в запрос. В итоге результат будет тот же, что и в примере выше.