HTTP запросы в Angular
В этом видео мы разберем, как делать HTTP запросы в Angular приложении (на примере GET метода)
В начале видео я отмечу важный момент с предыдушего урока. А именно вспомним, почему объявление ногового FormControl всегда подразумевает наличие null значения (FormControl). Причина в том, что значение контрола мы можем сбросить (очистить).
Что касается темы HTTP запросов, то для этого в Angular есть встроенный класс HttpClient, который содержим методы, имена которых совпадают с HTTP методами (get(), post() и так далее). Делать HTTP запросы рекомендуется делать в сервисах, а в компонентах инжектить эти сервисы, то есть компоненты не должны напрямую работать с HTTP.
Методы HttpClient (get(), post() и пр) возвращают не просто данные или Promise (как fetch()), а Observable. Observable — эта сущность, которая является частью библиотеки RxJS, о которой мы подробно поговорим на следующем уроке.
app.ts
import {Component, OnInit} from '@angular/core';
import {User, UserService} from './user-service';
import {Observable} from 'rxjs';
import {AsyncPipe} from '@angular/common';
import {ReactiveFormsModule} from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.html',
imports: [
ReactiveFormsModule,
AsyncPipe
],
styleUrl: './app.scss'
})
export class App implements OnInit {
protected users: User[] = [];
protected users$!: Observable<User[]>;
constructor(private userService: UserService) {
}
public ngOnInit() {
// this.userService.getUsers().subscribe({
// next: (users) => {
// this.users = users;
// },
// error: () => {}
// });
this.users$ = this.userService.getUsers();
}
}
app.html
<!--<ul>-->
<!-- @for (user of users; track user.id) {-->
<!-- <li>{{user.name}}</li>-->
<!-- }-->
<!--</ul>-->
@let users = users$ | async;
{{users?.length}}
<ul>
@for (user of users; track user.id) {
<li>{{user.name}}</li>
}
</ul>
<ul>
@for (user of users; track user.id) {
<li>{{user.name}}</li>
}
</ul>
user-service.ts
import {inject, Injectable} from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
export interface User {
id: number,
name: string;
username: string;
email: string;
address: Record<string, string>;
phone: string;
website: string;
company: Record<string, string>;
}
@Injectable({
providedIn: 'root',
})
export class UserService {
protected http = inject(HttpClient);
getUsers(): Observable<User[]> {
return this.http.get<User[]>('https://jsonplaceholder.typicode.com/users');
}
}
0 Comments