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

В прошлых темах были рассмотрены простейшие запросы к файлу 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 устанавливаются параметры, и затем этот объект передается в запрос. В итоге результат будет тот же, что и в примере выше.