Angular Academy · Lektion

Funktionella interceptorer

Fånga upp förfrågningar med funktionella interceptorer.

Lektion 1 av 413 steg

Funktionella interceptorer är en gratis lektion i Angular Academy på CoddyKit. Detta är lektion 1 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Angular Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Angular Academy innehåller totalt 4 lektioner.

Vad är en interceptor

En HTTP-interceptor sitter mellan Er app och nätverket. Varje request och response passerar genom den, så att Ni kan lägga till headers, logga, transformera, försöka igen eller hantera fel på ett centralt ställe.

HttpInterceptorFn

Modern Angular använder funktionella interceptors: en HttpInterceptorFn tar emot requesten och en next-handler och returnerar en observable med HTTP-händelser.

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

export const loggingInterceptor: HttpInterceptorFn = (req, next) => {
  console.log('request to', req.url);
  return next(req);
};

Registrera med withInterceptors

Registrera interceptors via provideHttpClient(withInterceptors([...])) i Er appkonfiguration.

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

export const appConfig = {
  providers: [
    provideHttpClient(withInterceptors([loggingInterceptor]))
  ]
};

Nästa handler

Anropa next(req) för att skicka requesten vidare i kedjan. Det Ni returnerar blir requestflödet; om Ni inte anropar next skickas requesten aldrig iväg.

Requests är oföränderliga

HttpRequest är oföränderlig. För att ändra den måste Ni anropa clone() med Era ändringar och skicka klonen till next.

export const interceptor: HttpInterceptorFn = (req, next) => {
  const cloned = req.clone({ setHeaders: { 'X-App': 'demo' } });
  return next(cloned);
};

Kedja flera interceptors

Interceptors körs i den ordning de listas. Var och en omsluter nästa, så arrayen bildar en pipeline: den första ser requesten först och responsen sist.

withInterceptors([authInterceptor, loggingInterceptor, errorInterceptor])
// auth runs first on the way out

Använda inject() i interceptors

Funktionella interceptors körs i en injection context, så att Ni kan använda inject() för tjänster direkt.

import { inject } from '@angular/core';

export const authInterceptor: HttpInterceptorFn = (req, next) => {
  const token = inject(AuthService).token();
  return next(req); // use token to modify req
};

Inspektera responsen

Använd tap på den returnerade strömmen för att observera responser, till exempel för tidsmätning eller loggning.

import { tap } from 'rxjs';

export const timingInterceptor: HttpInterceptorFn = (req, next) => {
  const start = Date.now();
  return next(req).pipe(
    tap(() => console.log(req.url, Date.now() - start, 'ms'))
  );
};

Villkorlig interception

Ni kan grena baserat på requestens URL eller metod för att tillämpa logik selektivt.

export const apiOnly: HttpInterceptorFn = (req, next) => {
  if (!req.url.startsWith('/api')) return next(req);
  const cloned = req.clone({ setHeaders: { 'X-Api': '1' } });
  return next(cloned);
};

Funktionella interceptors jämfört med klassbaserade

Funktionella interceptors ersätter den äldre klassbaserade HttpInterceptor. De är enklare, tree-shakable och lätta att testa, och registreras utan DI-tokens.

Samverkan med DI-baserade interceptors

Om Ni måste använda äldre klassbaserade interceptors överbryggar withInterceptorsFromDi() dem. Föredra funktionella interceptors i ny kod.

provideHttpClient(
  withInterceptors([authInterceptor]),
  withInterceptorsFromDi()
)

Snabbkontroll

Testa Er förståelse av funktionella interceptors.

Besvara frågan i den interaktiva lektionen

Sammanfattning: Funktionella interceptors

Interceptors samlar gemensam HTTP-logik på ett centralt ställe.

HttpInterceptorFn: (req, next) => Observable.
Registrera med withInterceptors([...]).
Klona requests för att ändra dem och anropa next för att fortsätta.
Använd inject() för tjänster.

Nästa: lägga till auth-headers.

Gratis att börja

Lär dig HTML med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 38
Lektioner: 144

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Funktionella interceptorer” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Angular Academy, inklusive ”Funktionella interceptorer”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Angular Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Funktionella interceptorer”?

Fånga upp förfrågningar med funktionella interceptorer. Ni övar på Angular Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Angular Academy?

Du behöver inga förkunskaper. Utbildningen i Angular Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 4.

Hur lång tid tar lektionen ”Funktionella interceptorer”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Angular Academy-lektionen?

Ja. Varje Angular Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till Angular Academy