Angular HTTP interceptorlar

HTTP to‘xtatuvchilari HttpClient pipeline liniyasidagi funksiyalar bo‘lib, ular sizga sarlavhalar qo‘shish, jurnallar yozish, xatolarni qayta ishlash va bir joyda qayta urinib ko‘rish imkonini beradi.

HTTP interceptor’lar asoslari

So‘rovlar va javoblarni global miqyosda tekshiring yoki o‘zgartiring.
Interceptor - bu HttpClient pipeline liniyasidagi har bir so‘rov/javob uchun ishlaydigan funksiya.
Umumiy foydalanish: auth sarlavhalari, xatolarni qayta ishlash, qayta urinishlar, jurnalga yozish.

import { provideHttpClient, withInterceptors } from '@angular/common/http';

const authInterceptor = (req, next) => {
  const cloned = req.clone({ setHeaders: { Authorization: 'Bearer token' } });
  return next(cloned);
};

bootstrapApplication(App, {
  providers: [provideHttpClient(withInterceptors([authInterceptor]))]
});

Eslatmalar:

Tegishli: HttpClient va xizmatlarga qarang.
Zanjirli kichik, bir maqsadli tutqichlar.
Komponentlarni nozik holatda saqlash uchun xatolarni markaziy tarzda boshqaring.

Interceptor yozish

const logInterceptor = (req, next) => {
  console.log(req.method, req.url);
  return next(req);
};

provideHttpClient(withInterceptors([logInterceptor]));

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

const typedInterceptor: HttpInterceptorFn = (req, next) => {
  // Example: add a header
  return next(req.clone({ setHeaders: { 'X-Trace': 'demo' } }));
};

provideHttpClient(withInterceptors([typedInterceptor]));

Misol

import { bootstrapApplication } from '@angular/platform-browser';
import { Component, inject } from '@angular/core';
import { HttpClient, provideHttpClient, withInterceptors, HttpResponse, HttpRequest, HttpHandlerFn } from '@angular/common/http';
import { of } from 'rxjs';
import { JsonPipe } from '@angular/common';

const logInterceptor = (req: HttpRequest<any>, next: HttpHandlerFn) => {
  console.log('Request', req.method, req.url);
  return next(req);
};

// Mock interceptor so the demo runs without external network
const mockInterceptor = (req: HttpRequest<any>, next: HttpHandlerFn) => {
  if (req.method === 'GET' && req.url.includes('jsonplaceholder.typicode.com/todos/1')) {
    const body = { id: 1, title: 'Mocked todo', completed: false };
    return of(new HttpResponse({ status: 200, body }));
  }
  return next(req);
};

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [JsonPipe],
  template: `
    <h3>HTTP Interceptor</h3>
    <button (click)="load()">Load</button>
    <pre>{{ data | json }}</pre>
  `
})
class App {
  #http = inject(HttpClient);
  data: any;
  load() {
    this.#http.get('https://jsonplaceholder.typicode.com/todos/1').subscribe(r => this.data = r);
  }
}

bootstrapApplication(App, { providers: [provideHttpClient(withInterceptors([mockInterceptor, logInterceptor]))] });

<app-root></app-root>

Misolni ishga tushirish »

Misol tushuntirildi

withInterceptors([fn]): Har bir so‘rov va javob uchun ishlaydigan bir yoki bir nechta tutuvchi funksiyalarni qayd qiladi.
Interceptor fn (req, next): ixtiyoriy ravishda so‘rovni o‘zgartirish uchun req.clone(...), keyin davom etish uchun next(req) ni chaqiring.
provideHttpClient(...): HttpClient-ni yoqadi va bootstrap-da tutqichlarni tuzadi.

Eslatmalar:

Tartib: so‘rovlar interceptor’lardan berilgan tartibda o‘tadi; javoblar esa teskari tartibda qaytadi.
O‘zgarmas: HttpRequestni o‘zgartirish uchun req.clone({...}) dan foydalaning.
Single-purpose: Compose focused interceptors with withInterceptors([...]).

Xatolarni qayta ishlash va qayta urinishlar

Interceptorda HTTP xatosini qayta ishlashni markazlashtiring.
Xatolarni foydalanuvchilarga qulay xabarlar bilan taqqoslash orqali komponentlarni soddalashtiring.
Qayta ishlash mantiqini diqqat bilan orqaga qaytarish bilan qo‘shing; Qayta urinib bo‘lmaydigan xatolarni qayta urinishdan saqlaning (masalan, 4xx).

import { catchError } from 'rxjs/operators';
import { throwError } from 'rxjs';

const errorInterceptor = (req, next) => next(req).pipe(
  catchError(err => {
    // map/log/notify
    return throwError(() => err);
  })
);

provideHttpClient(withInterceptors([errorInterceptor]));

Ko‘rsatmalar:

Xatolarni foydalanuvchilarga qulay xabarlar bilan taqqoslash uchun tutuvchida catchError-dan foydalaning.
Idempotent so‘rovlarni retryWhen yordamida qayta urinish yoki orqaga qaytarish bilan qayta urinib ko‘ring; 4xx xatolarni qayta urinishdan saqlaning.
Tokenlarni yangilash yoki qayta yo‘naltirish orqali autentifikatsiyani (401) boshqaring; ko‘p joylardan navigatsiya qilishdan saqlaning - uni markazlashtirilgan holda saqlang.

Tartib va kompozitsiya

Kichkina tutqichlarni tuzing va ular yugurish tartibiga e’tibor bering.
Taqdim etilgan tartibda so‘rovlar oqimi; javoblar teskari yo‘nalishda ochiladi.

const auth = (req, next) => next(req.clone({ setHeaders: { Authorization: '...' } }));
const log  = (req, next) => { console.log(req.url); return next(req); };

// Request order: auth -> log
// Response order: log -> auth
provideHttpClient(withInterceptors([auth, log]));

Tartib: so‘rovlar interceptor’lardan berilgan tartibda o‘tadi; javoblar esa teskari tartibda qaytadi.

Bir maqsadli: Interceptorlarni diqqat markazida tuting (auth, logging, xatolarni qayta ishlash) va withInterceptors([...]) bilan tuzing.

Stateless: interceptor’lar ichida o‘zgaruvchan state saqlamang; sof funksiyalar va inject qilingan xizmatlardan (services) foydalaning.

Qayta urinish xavfsizligi: faqat idempotent usullarni qaytadan sinab ko‘ring (masalan, GET/HEAD).

Idempotent kalitlardan foydalanmaguningizcha, idempotent bo‘lmagan usullarni qaytadan urinishdan saqlaning.

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish