Angular Academy · Oppitunti

Toiminnalliset interceptors-komponentit

Siepatkaa pyynnöt toiminnallisilla interceptors-komponenteilla

Oppitunti 1/413 vaihetta

Toiminnalliset interceptors-komponentit on ilmainen Angular Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu Angular Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Angular Academy-kurssilla on yhteensä 4 oppituntia.

Mikä on interceptor

HTTP-interceptor toimii sovelluksen ja verkon välissä. Jokainen pyyntö ja vastaus kulkee sen kautta, joten voitte lisätä otsakkeita, kirjata tietoja, muuntaa sisältöä, yrittää uudelleen tai käsitellä virheitä yhdessä keskitetysti.

HttpInterceptorFn

Moderni Angular käyttää funktionaalisia interceptoreita: HttpInterceptorFn saa parametrina pyynnön ja next-käsittelijän ja palauttaa HTTP-tapahtumien observablen.

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

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

Rekisteröinti withInterceptors-funktiolla

Tarjotkaa interceptorit sovelluksen konfiguraatiossa provideHttpClient(withInterceptors([...]))-kutsulla.

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

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

Seuraava käsittelijä

Kutsukaa next(req)-funktiota välittääksenne pyynnön ketjussa eteenpäin. Palauttamanne arvo määrittää pyyntövirran; jos next-funktiota ei kutsuta, pyyntöä ei koskaan lähetetä.

Pyynnöt ovat muuttumattomia

HttpRequest on muuttumaton. Sen muuttamiseksi on kutsuttava clone()-funktiota muutosten kanssa ja välitettävä klooni next-funktiolle.

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

Useiden interceptoreiden ketjuttaminen

Interceptorit suoritetaan luettelon mukaisessa järjestyksessä. Kukin kietoo seuraavan ympärilleen, joten taulukko muodostaa putken: ensimmäinen näkee pyynnön ensin ja vastauksen viimeisenä.

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

inject()-funktion käyttäminen interceptoreissa

Funktionaaliset interceptorit suoritetaan injektiokontekstissa, joten voitte käyttää palveluita suoraan inject()-funktiolla.

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

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

Vastauksen tarkasteleminen

Voitte tarkkailla palautettua virtaa esimerkiksi ajoitusta tai lokitusta varten.

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'))
  );
};

Ehdollinen interceptointi

Voitte haarauttaa käsittelyn pyynnön URL-osoitteen tai metodin perusteella ja käyttää logiikkaa valikoivasti.

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);
};

Funktionaaliset ja luokkapohjaiset interceptorit

Funktionaaliset interceptorit korvaavat vanhemmat luokkapohjaiset HttpInterceptor-interceptorit. Ne ovat yksinkertaisempia, tree-shakable ja helposti testattavia, eikä niiden rekisteröinti edellytä DI-tunnisteita.

DI-pohjaisten interceptoreiden yhteensopivuus

Jos vanhoja luokkapohjaisia interceptoreita on pakko käyttää, withInterceptorsFromDi() yhdistää ne uuteen tapaan. Suosikaa funktionaalisia interceptoreita uudessa koodissa.

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

Pikatesti

Testatkaa, kuinka hyvin ymmärrätte funktionaalisia interceptoreita.

Vastaa interaktiivisessa oppitunnissa

Kertaus: funktionaaliset interceptorit

Interceptorit keskittävät HTTP:n poikkileikkaavan logiikan.

HttpInterceptorFn: (req, next) => Observable.
Rekisteröikää ne withInterceptors([...])-funktiolla.
Muokatkaa pyyntöjä kloonaamalla ne ja jatkakaa next-funktiolla.
Käyttäkää palveluihin inject()-funktiota.

Seuraavaksi: todennusotsakkeiden lisääminen.

Aloita maksutta

Opi HTML tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 38
Oppitunnit: 144

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Toiminnalliset interceptors-komponentit” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Angular Academy-oppimispolun 3 oppituntia, myös oppitunnin “Toiminnalliset interceptors-komponentit”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Angular Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Toiminnalliset interceptors-komponentit”?

Siepatkaa pyynnöt toiminnallisilla interceptors-komponenteilla Harjoittelet Angular Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Angular Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Angular Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/4.

Kuinka kauan ”Toiminnalliset interceptors-komponentit”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä Angular Academy-oppitunnilla?

Kyllä. Jokainen Angular Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: Angular Academy