Скачать или смотреть Пример получения Angular httpclient

В этом видео мы обсудим, как вызвать серверную службу с помощью сервиса Angular HttpClient. В частности, мы рассмотрим отправку GET-запроса для получения данных с сервера.

Текстовая версия видео
http://csharp-video-tutorials.blogspo...

Здоровое питание очень важно как для тела, так и для разума. Мы хотим вдохновить вас готовить и питаться правильно. Если вам нравятся рецепты Aarvi Kitchen, пожалуйста, поддержите нас, поделившись ими, подписавшись и поставив лайк.    / @aarvikitchen5572  

Слайды
http://csharp-video-tutorials.blogspo...

Учебное пособие по Angular CRUD
   • Angular CRUD tutorial  

Текстовые статьи и слайды учебного пособия по Angular CRUD
http://csharp-video-tutorials.blogspo...

Все учебные пособия по DotNet и SQL Server на английском языке
https://www.youtube.com/user/kudvenka...

Все учебные пособия по DotNet и руководства по SQL Server на арабском языке
   / kudvenkatarabic  

Шаг 1: Импорт Angular HttpClientModule: Прежде чем использовать службу HttpClient, необходимо импортировать Angular HttpClientModule. В большинстве приложений Angular это делается в корневом модуле AppModule (app.module.ts).

import { HttpClientModule } from '@angular/common/http';

Включите HttpClientModule в массив imports декоратора @NgModule() класса AppModule.

Шаг 2: Импорт и внедрение службы HttpClient: Мы хотим использовать службу HttpClient в нашей службе EmployeeService (employee.service.ts).

Импорт службы HttpClient
import { HttpClient } from '@angular/common/http';

Внедрите сервис с помощью конструктора класса сервиса.

@Injectable()
export class EmployeeService {
constructor(private httpClient: HttpClient) {
}

getEmployees(): Observable[Employee[]] {
return this.httpClient.get[Employee[]]('http://localhost:3000/employees');
}
}

Обратите внимание:
1. Мы используем метод get() сервиса HttpClient для отправки HTTP-запроса GET.

2. Помимо метода get(), у нас также есть методы post(), put(), patch() и delete() для выполнения соответствующих HTTP-операций.

3. Методу get() мы передаем URI серверной службы, которую хотим вызвать.

4. Также обратите внимание, что мы используем метод get[T]() с универсальным параметром для указания типа ожидаемых данных. В нашем случае мы ожидаем возврат массива Employee[].

5. Если бы мы использовали старый HTTP-сервис, нам пришлось бы использовать метод .json() в ответе для получения JSON-данных. С новым HttpClient нам больше не нужно этого делать. JSON теперь является ответом по умолчанию.

Шаг 3: Подписка на Angular Observable-сервис: Чтобы использовать метод getEmployees() сервиса EmployeeService, нам необходимо подписаться на него, так как он возвращает Observable. Если мы не подпишемся, метод сервиса не будет вызван.

Однако есть исключение. Если Observable-сервис используется Resolver, сервис resolver подпишется на Observable, нам не нужно явно подписываться. Resolutionr автоматически подпишется на Observable-сервис. С другой стороны, если метод getEmployees() сервиса EmployeeService используется компонентом или другой службой, то этот компонент или служба должны быть явно подписаны на Observable, иначе они не будут вызваны.

Убедитесь, что JSON-сервер запущен. Если он не запущен, список маршрутов ничего не отображает. Используйте следующую команду для запуска JSON-сервера:

json-server --watch db.json

В настоящее время мы не обрабатываем ошибки. Что произойдёт, если запрос не будет выполнен на сервере или если плохое сетевое соединение не позволит запросу достичь сервера? В этом случае служба HttpClient возвращает объект ошибки вместо успешного ответа. Мы обсудим обработку ошибок в следующем видео.