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

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

Допустим, на стороне сервера действует некоторый обработчик или скрипт, который принимает в качестве параметра некоторое число и вычисляет его факториал.

Например, в PHP мы могли бы определить следующий простейший скрипт getFactorial.php:

<?php
if(isset($_GET['number']))
{
    $num = $_GET['number'];
    $result=1;
    for($i=1; $i<=$num; $i++){

        $result *= $i;
    }
    echo $result;
}
else
{
    echo "Введенные данные некорректны";
}
?>

В ASP.NET MVC это могло бы быть следующее действие контроллера:

public class HomeController : Controller
{
    public ActionResult GetFactorial(int number)
    {
        int result = 1;
        for(int i =1; i<=number; i++)
        {
            result *= i;
        }

        return Json(result, JsonRequestBehavior.AllowGet);
    }
}

Это может быть какая-то другая технология сервера. Но вне зависимости от выбранной технологии следует учитывать ограничения на кроссдоменные запросы. В частности, если наше приложение на Angular запускается в одном домене, а сервер, обрабатывающий запросы, запущен на другом домене, то на сервере нам надо включить технологию CORS. В PHP для этого можно добавить заголовки в скрипт:

<?php
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS");
header("Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token , Authorization");

// остальное содержимое скрипта

В ASP.NET MVC это может быть добавление в файл конфигурации web.config следующего узла:

<system.webServer>
    <httpProtocol>
        <customHeaders>
            <clear />
            <add
                name="Access-Control-Allow-Origin"
                value="*"
            />
            <add
                name="Access-Control-Allow-Headers"
                value="Origin, X-Requested-With, Content-Type, Accept"
            />
            <add
                name="Access-Control-Allow-Methods"
                value="*"
            />
        </customHeaders>
    </httpProtocol>
    <!-- остальное содержимое узла system.webServer -->
</system.webServer>

В других технологиях могут применяться другие способы добавления CORS.

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

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class HttpService {
    constructor(private http: HttpClient) {}

    //http://localhost:60489/Home/GetFactorial?number=  ASP.NET MVC
    //http://localhost:8080/angular/getFactorial.php?number=    PHP
    getFactorial(num: number) {
        return this.http.get(
            'http://localhost:60489/Home/GetFactorial?number=' +
                num
        );
    }
}

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

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

import { Component, OnInit } from '@angular/core';
import { HttpService } from './http.service';
import { User } from './user';

@Component({
    selector: 'my-app',
    template: `
        <div *ngIf="done">{{ factorial }}</div>
        <div class="form-group">
            <label>Введите число</label>
            <input
                class="form-control"
                type="number"
                name="factorial"
                [(ngModel)]="num"
            />
        </div>
        <div class="form-group">
            <button
                class="btn btn-default"
                (click)="submit(num)"
            >
                Отправить
            </button>
        </div>
    `,
    providers: [HttpService],
})
export class AppComponent {
    factorial: number;
    done: boolean = false;
    constructor(private httpService: HttpService) {}
    submit(num: number) {
        this.httpService
            .getFactorial(num)
            .subscribe((data: number) => {
                this.factorial = data;
                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) {}

    //http://localhost:60489/Home/GetFactorial?number=  ASP.NET MVC
    //http://localhost:8080/angular/getFactorial.php?number=    PHP
    getFactorial(num: number) {
        const params = new HttpParams().set(
            'number',
            num.toString()
        );
        return this.http.get(
            'http://localhost:60489/Home/GetFactorial',
            { params }
        );
    }
}

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

Комментарии