Jassif Team Institution

ஆங்குலர் HTTP இடைமறுப்பிகள்

HTTP இடைமறுப்பிகள் என்பது HttpClient குழாய்க்கோட்டில் உள்ள செயல்பாடுகள் ஆகும், அவை தலைப்புகளைச் சேர்க்க, பதிவு செய்ய, பிழைகளைக் கையாள மற்றும் மீண்டும் முயற்சிக்க உங்களை அனுமதிக்கின்றன.

HTTP இடைமறுப்பிகள் அடிப்படைகள்

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

const authInterceptor = (req, அடுத்தது) => {
  const cloned = req.clone({ setHeaders: { Authorization: 'Bearer token' } });
  return அடுத்தது(cloned);
};

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

இடைமறுப்பியை எழுதுதல்

// எளிய பதிவு இடைமறுப்பி
const logInterceptor = (req, அடுத்தது) => {
  console.log(req.method, req.url);
  return அடுத்தது(req);
};

provideHttpClient(withInterceptors([logInterceptor]));

// வகைப்படுத்தப்பட்ட இடைமறுப்பி
import { HttpInterceptorFn } from '@angular/common/http';

const typedInterceptor: HttpInterceptorFn = (req, அடுத்தது) => {
  // எடுத்துக்காட்டு: ஒரு தலைப்பைச் சேர்க்கவும்
  return அடுத்தது(req.clone({ setHeaders: { 'X-Trace': 'demo' } }));
};

provideHttpClient(withInterceptors([typedInterceptor]));

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>, அடுத்தது: HttpHandlerFn) => {
  console.log('Request', req.method, req.url);
  return அடுத்தது(req);
};

// வெளிப்புற வலையமைப்பு இல்லாமல் டெமோ இயங்க Mock இடைமறுப்பி
const mockInterceptor = (req: HttpRequest<any>, அடுத்தது: 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 அடுத்தது(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]))] });

பிழை கையாளுதல் மற்றும் மீண்டும் முயற்சிகள்

HTTP பிழை கையாளுதலை ஒரு இடைமறுப்பியில் மையப்படுத்தவும்.

பயனர் நட்பு செய்திகளுக்கு பிழைகளை மேப்பிங் செய்வதன் மூலம் கூறுகளை எளிமையாக வைத்திருக்கவும்.

backoff உடன் மீண்டும் முயற்சி தர்க்கத்தை கவனமாகச் சேர்க்கவும்; மீண்டும் முயற்சிக்க முடியாத பிழைகளை (எ.கா., 4xx) மீண்டும் முயற்சிக்கத் தவிர்க்கவும்.

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

const errorInterceptor = (req, அடுத்தது) => அடுத்தது(req).pipe(
  catchError(err => {
    // பிழையை மேப்பிங்/பதிவு/அறிவிப்பு
    console.error('HTTP Error:', err);
    // பயனர் நட்பு செய்திக்கு மேப்பிங்
    const userMessage = 'Something went wrong. Please try again.';
    return throwError(() => new Error(userMessage));
  })
);

provideHttpClient(withInterceptors([errorInterceptor]));

வரிசைப்படுத்துதல் & உருவாக்கம்

சிறிய இடைமறுப்பிகளை உருவாக்கவும் மற்றும் அவை இயங்கும் வரிசையைக் கருத்தில் கொள்ளவும்.

கோரிக்கைகள் வழங்கப்பட்ட வரிசையில் பாய்கின்றன; பதில்கள் தலைகீழ் வரிசையில் மீள்கின்றன.

const auth = (req, அடுத்தது) => 
  அடுத்தது(req.clone({ setHeaders: { Authorization: 'Bearer ...' } }));

const log = (req, அடுத்தது) => { 
  console.log('Request to:', req.url); 
  return அடுத்தது(req); 
};

// கோரிக்கை வரிசை: auth -> log
// பதில் வரிசை: log -> auth
provideHttpClient(withInterceptors([auth, log]));

பொதுவான இடைமறுப்பி முறைகள்

req.clone({setHeaders: {Authorization}})

retryWhen(errors => errors.pipe(delay(1000), take(3)))

console.log(`${req.method} ${req.url}`)

catchError(err => { /* handle */ })

பயிற்சி

எந்த வரிசையில் பதில்கள் HTTP இடைமறுப்பிகள் வழியாகச் செல்கின்றன?