Angular HttpClient - работа с HTTP запросами

Использование HttpClient

Angular HttpClient - класс, который предоставляет пользователям удобный интерфейс для работы с HTTP запросами, он базируется на использовании XMLHttpRequest объекта браузера - .

Для использования HttpClient API нужно импортировать модуль HttpClientModule (обычно - в app.module.ts):

После этого можно использовать HttpClient в классе Angular - приложений, импортируя HttpClient и подключая его через dependancy injection. Например, создав сервис, который будет отвечать за передачу данных но HTTP:

Объект, созданный из HttpClient (в примере выше - myHttp), поддерживает методы:

• get
• post
• put
• delete
• patch
• head
• jsonp

Для тестирования приложения Angular, которое работает с HttpClient можно использовать, например:

• Angular модуль:  HttpClientTestingModule, 
• специальные online сервисы, типа: http://jsonplaceholder.typicode.com/ , https://www.jsontest.com/, 
• nodeJs (Angular in-memory web API: npm i angular-in-memory-web-api@0.5.3 --save ).
• Или любой другой WEB server, который будет обрабатывать HTTP запросы.

  
  

  Простой пример - get()

  Простой пример использования метода get() Http клиента - файл на локальном диске, который содержит данные в формате JSON.

  Создадим айл с именем: myData.json

  [ {"Name": "Bob", "Age": "23", "Course": "WEB"}, {"Name": "Anna", "Age": "33", "Course": "PHP"}, {"Name": "Yony", "Age": "27", "Course": "Angular"} ]
  

  Расположим его в папке src/assets/data

  Создадим компонент get-data

  import { Component, OnInit } from '@angular/core'; import { HttpClient } from '@angular/common/http'; @Component({ selector: 'app-get-data', templateUrl: './get-data.component.html', styleUrls: ['./get-data.component.css'] }) export class GetDataComponent implements OnInit { fileData: any; constructor(private myHttp: HttpClient) { } ngOnInit( ) { this.myHttp.get('assets/data/myData.json').subscribe( (reslt) => { console.log(this.fileData = reslt) }); } }
  

  
  

  this.myHttp - наш объект типа HttpClient
  

  this.myHttp.get('assets/data/myData.json') - метод get() этого объекта, который получает в качестве рапаметра - URL , где расположен источник данных в формате JSON
  

  Этот метод возвращает в качестве результата Angular объект типа Observable. Это - массив данных, элементв которого формируются асинхронно, динамически, в результате запроса.

  У этого объекта есть метод - subscribe(), который позволяет получать данные в формате JSON.

  Мы задали (в формате arrow - function) параметр этого меода - функцию с аргументом reslt, которая выполнится по эго окончании (call-back function). В переменную reslt subscribe поместит результат выполнения.

   this.myHttp.get('assets/data/myData.json').subscribe((reslt) => {console.log(reslt)});

  Этот результат можно запомнить в переменной класса и использовать в шаблоне компонента (при интерпретации данных в примере используется Angular pipe - json для форматирования данных ).

  Шаблон:

  {{fileData | json }}
  

  
  

  this.myHttp.get('assets/data/myData.json').subscribe((reslt) => {console.log(this.fileData = reslt)});
  

  
  

  Результат: 

  
  

  PHP - server side

  Далее , для тестирования используем на сервере PHP - программу (myAngularGetV2.php).

  Программа на PHP запущена локально (URL =  http://angularhttp/myAngularGetV2.php).

  Программа получает запрос от Angular и отвечает на него.

  Рассмотрим метод HttpClient.get().

  
  

  Код программы:

  <?php header('Access-Control-Allow-Origin: http://localhost:4200'); header('Content-type: application/json'); header('Access-Control-Allow-Methods: GET'); $outstr = ' [ {"Name": "Bob", "Age": "23", "Course": "WEB"}, {"Name": "Anna", "Age": "33", "Course": "PHP"}, {"Name": "Yony", "Age": "27", "Course": "Angular"} ] '; echo($outstr); ?>
  

  
  

  Эта программа получает запрос от Angular - приложения и отдаёт ему нужные данные (данные эти в нашем случае хранятся в переменной $outstr, в реальной жизни, скорее всего PHP берёт их из базы данных)

  Результат - такой же, как при чтении из файла на диске.

  
  

  Передача данных от Angular на сервер по get()

  Усложним немного запрос от Angular к серверу.

  Для этого в метод get() добавим ещё один допустимый параметр - params и передадим через него на сервер имя пользователя.

  Вызов get() примет вид:

  this.myHttp.get( myUrl, {params: { 'Name': 'Anna' }} ).subscribe( (reslt) => {console.log(this.fileData = reslt)} ); }
  

  Мы передаём теперь на сервер по методу get параметр Name со значением Anna

  Теперь сервер получает запрос с параметром. PHP - программа на сервере может этот запрос проанализиолвать и дать ответ в соответствии с этим параметром.

  В нашем случае заведём в программе массив данных - $students и в этом массиве найдём того, чьё имя соответствует параметру запроса.

  В ответ сервера (JSON ) вставим данные только найденного студента.

  
  

  PHP:

  <?php header('Access-Control-Allow-Origin: http://localhost:4200'); header('Content-type: application/json'); header('Access-Control-Allow-Methods: GET'); $stud = $_GET['Name']; $students = Array( Array("Name"=> "Bob", "Age"=> "23", "Course"=> "WEB"), Array("Name"=> "Anna", "Age"=> "33", "Course"=> "PHP"), Array("Name"=> "Yony", "Age"=> "27", "Course"=> "Angular"), ); foreach($students as $student){ if($student['Name'] == $stud){ $outstr = '[{ '; $outstr .= '"Name": "'; $outstr .= $student['Name']; $outstr .= '", "Age": "'; $outstr .= $student['Age']; $outstr .= '", "Course": "'; $outstr .= $student['Course']; $outstr .= '" }]'; } } echo($outstr); ?>
  

  
  

  В переменную $stud получили искомого студента

  В цикле foreach перебираем массив, ищем нужного.

  Если нашли - формируем строке $outstring ответ в формате JSON и командой echo отправляем ответ (до этого функциями header мы сформировали необходимый набор HTTP заголовков ).

  
  

  Компонент:
  

  import { Component, OnInit } from '@angular/core'; import { HttpClient } from '@angular/common/http'; @Component({ selector: 'app-get-data', templateUrl: './get-data.component.html', styleUrls: ['./get-data.component.css'] }) export class GetDataComponent implements OnInit { fileData: any; constructor(private myHttp: HttpClient) { } ngOnInit( ) { const: myUrl = 'http://angularhttp/myAngularGetV2.php'; this.myHttp.get( myUrl, {params: { 'Name': 'Anna' }} ).subscribe( (reslt) => {console.log(this.fileData = reslt)} ); } }
  

  
  

  Шаблон (используем Angular - pipe json для ворматирования данных):

  {{ getData | json }}
  

  
  

  Результат