Angular Academy · Pelajaran

Pencegat Fungsional

Cegat permintaan dengan pencegat fungsional.

Pencegat Fungsional adalah pelajaran Angular Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Angular Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Angular Academy mencakup 4 pelajaran total.

Apa itu interceptor

Interceptor HTTP berada di antara aplikasi dan jaringan Anda. Setiap permintaan dan respons melewatinya, sehingga Anda dapat menambahkan header, mencatat, mengubah, mencoba lagi, atau menangani error di satu tempat terpusat.

HttpInterceptorFn

Angular modern menggunakan interceptor fungsional: HttpInterceptorFn menerima permintaan dan pengendali next, lalu mengembalikan observable berisi peristiwa HTTP.

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

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

Mendaftarkan dengan withInterceptors

Sediakan interceptor melalui provideHttpClient(withInterceptors([...])) dalam konfigurasi aplikasi.

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

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

Pengendali next

Panggil next(req) untuk meneruskan permintaan melalui rantai. Apa pun yang Anda kembalikan menjadi alur permintaan; jika next tidak dipanggil, permintaan tidak pernah dikirim.

Permintaan bersifat tidak dapat diubah

HttpRequest bersifat tidak dapat diubah. Untuk mengubahnya, Anda harus menggunakan clone() dengan modifikasi Anda, lalu meneruskan hasil kloning tersebut ke next.

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

Merangkai beberapa interceptor

Interceptor dijalankan sesuai urutan yang tercantum. Masing-masing membungkus interceptor berikutnya, sehingga array tersebut membentuk pipeline: interceptor pertama melihat permintaan lebih dahulu dan respons paling akhir.

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

Menggunakan inject() di dalam interceptor

Interceptor fungsional berjalan dalam konteks injeksi, sehingga Anda dapat langsung menggunakan layanan dengan inject().

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

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

Memeriksa respons

Hubungkan diri ke aliran yang dikembalikan untuk mengamati respons, misalnya untuk pengukuran waktu atau pencatatan.

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

Intersepsi bersyarat

Anda dapat menentukan percabangan berdasarkan URL atau metode permintaan untuk menerapkan logika secara selektif.

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

Interceptor fungsional vs berbasis kelas

Interceptor fungsional menggantikan HttpInterceptor berbasis kelas yang lebih lama. Interceptor ini lebih sederhana, dapat dihapus oleh tree-shaking, mudah diuji, dan dapat didaftarkan tanpa token DI.

Interoperabilitas interceptor berbasis DI

Jika Anda harus menggunakan interceptor berbasis kelas lama, withInterceptorsFromDi() menjembataninya. Untuk kode baru, utamakan interceptor fungsional.

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

Pemeriksaan Singkat

Uji pemahaman Anda tentang interceptor fungsional.

Ringkasan: Interceptor Fungsional

Interceptor memusatkan logika HTTP lintas fungsi.

HttpInterceptorFn: (req, next) => Observable.
Daftarkan dengan withInterceptors([...]).
Kloning permintaan untuk mengubahnya; panggil next untuk melanjutkan.
Gunakan inject() untuk layanan.

Berikutnya: menambahkan header autentikasi.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Pencegat Fungsional” gratis?

Ya — teks lengkap “Pencegat Fungsional” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Angular Academy, upgrade ke CoddyKit PRO. Kursus Angular Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Pencegat Fungsional”?

Cegat permintaan dengan pencegat fungsional. Kamu berlatih Angular Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Angular Academy?

Tidak diperlukan pengalaman sebelumnya. Angular Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.

Berapa lama pelajaran “Pencegat Fungsional” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Angular Academy ini?

Ya. Setiap pelajaran Angular Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Angular Academy