HttpClient та перехоплювачі в Angular
HttpClient
HttpClient Angular надає типізований HTTP API, побудований на RxJS Observables. Він обробляє серіалізацію JSON, обробку помилок та трансформацію запитів/відповідей.
Основне використання
typescript
import { HttpClient } from '@angular/common/http';
@Injectable({ providedIn: 'root' })
export class ApiService {
private http = inject(HttpClient);
// GET
getUsers(): Observable<User[]> {
return this.http.get<User[]>('/api/users');
}
// GET з параметрами
searchUsers(query: string): Observable<User[]> {
return this.http.get<User[]>('/api/users', {
params: { q: query, limit: '10' }
});
}
// POST
createUser(user: CreateUserDto): Observable<User> {
return this.http.post<User>('/api/users', user);
}
// PUT
updateUser(id: string, data: Partial<User>): Observable<User> {
return this.http.put<User>(\`/api/users/\${id}\`, data);
}
// DELETE
deleteUser(id: string): Observable<void> {
return this.http.delete<void>(\`/api/users/\${id}\`);
}
}Обробка помилок
typescript
import { catchError, retry, throwError } from 'rxjs';
getUsers(): Observable<User[]> {
return this.http.get<User[]>('/api/users').pipe(
retry(2), // Повторити невдалі запити двічі
catchError(error => {
if (error.status === 404) {
return of([]); // Повернути порожній масив для 404
}
console.error('API Error:', error.message);
return throwError(() => new Error('Не вдалося завантажити користувачів'));
})
);
}HTTP Перехоплювачі
Перехоплювачі модифікують кожен HTTP запит/відповідь — автентифікація, ведення журналу, обробка помилок тощо.
Функціональний перехоплювач (сучасний)
typescript
import { HttpInterceptorFn } from '@angular/common/http';
// Перехоплювач автентифікації — додати токен до кожного запиту
export const authInterceptor: HttpInterceptorFn = (req, next) => {
const authService = inject(AuthService);
const token = authService.getToken();
if (token) {
const cloned = req.clone({
setHeaders: { Authorization: \`Bearer \${token}\` }
});
return next(cloned);
}
return next(req);
};
// Перехоплювач ведення журналу
export const loggingInterceptor: HttpInterceptorFn = (req, next) => {
const started = Date.now();
return next(req).pipe(
tap(event => {
if (event instanceof HttpResponse) {
console.log(\`\${req.method} \${req.url} — \${Date.now() - started}ms\`);
}
})
);
};
// Перехоплювач помилок
export const errorInterceptor: HttpInterceptorFn = (req, next) => {
return next(req).pipe(
catchError((error: HttpErrorResponse) => {
if (error.status === 401) {
inject(Router).navigate(['/login']);
}
return throwError(() => error);
})
);
};Реєстрація перехоплювачів
typescript
// main.ts
bootstrapApplication(AppComponent, {
providers: [
provideHttpClient(
withInterceptors([
authInterceptor,
loggingInterceptor,
errorInterceptor,
])
),
],
});Загальні випадки використання перехоплювачів
| Випадок використання | Що він робить |
|---|---|
| Автентифікація | Додає токен Bearer до запитів |
| Обробка помилок | Глобальний тост помилок, перенаправлення на 401 |
| Індикатор завантаження | Показати/сховати спінер під час запитів |
| Кешування | Кешувати відповіді GET |
| Повтор | Повторити невдалі запити |
| Ведення журналу | Логувати час запиту/відповіді |
Важливо:
HttpClient повертає Observables для всіх HTTP методів — використовуйте pipe() з операторами RxJS для обробки помилок та трансформації. Перехоплювачі є проміжним програмним забезпеченням для HTTP запитів — використовуйте їх для токенів автентифікації, обробки помилок та ведення журналу. Віддавайте перевагу функціональним перехоплювачам (HttpInterceptorFn) над класовими.
Коротка відповідь
Для співбесідиPremium
Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.