Memahami Pemintas Sudut : Melangkaui HTTP

Pemintas sudut ialah alat yang sangat berkuasa yang boleh digunakan oleh pembangun untuk mengurus cara aplikasi mereka mengendalikan permintaan dan respons HTTP. Mereka memainkan peranan penting dalam melaksanakan ciri seperti pengelogan, pengesahan, pengendalian ralat dan banyak lagi, yang membawa kepada kod yang lebih jelas dan mudah diselenggara.

Pemintas Sudut bertindak seperti perisian tengah antara aplikasi Sudut anda dan pelayan. Mereka memintas permintaan sebelum ia dihantar ke pelayan dan respons sebelum ia mencapai komponen aplikasi kami. Ini membolehkan pembangun mengubah suai permintaan dengan menambahkan pengepala, mengubah suai badan permintaan/tindak balas dan menukar kod status.

Menyediakan Projek Sudut Anda

Pertama, pastikan anda telah memasang Angular CLI. Jika tidak, anda boleh memasangnya dengan npm:

npm install -g @angular/cli

Sekarang, buat projek Angular baharu:

ng new Project_Name
cd Project_Name

Sekarang, Jana Pemintas HTTP baharu dengan CLI Sudut:

ng generate interceptor interceptors/interceptorName

Ini akan membuat dua fail: interceptorName.interceptor.ts dan interceptorName.interceptor.spec.ts dalam direktori src/app/interceptors.

Sekarang, Buka interceptorName.interceptor.ts dan tambah logik untuk pemintas anda. Berikut ialah contoh yang mencatatkan mesej.

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

export const interceptorName: HttpInterceptorFn = (req, next) => {
  console.log('HTTP Request:', req);
  return next(req);
};

Sekarang, Untuk menggunakan pemintas, buka app.config.ts dan tambahkannya pada tatasusunan penyedia:

...
import { provideHttpClient,withInterceptors } from '@angular/common/http';
import { interceptorName } from './interceptors/interceptorName.interceptor';


export const appConfig: ApplicationConfig = {
  providers: [
    ....
    provideHttpClient(
      withInterceptors([interceptorName])
    ),
  ],
};

Kes Penggunaan Lanjutan Pemintas Sudut

Transformasi Tersuai Permintaan dan Respons

Pemintas boleh menyesuaikan transformasi data untuk permintaan dan respons, seperti mengubah suai badan permintaan, pengepala atau format data respons sebelum ia diproses oleh aplikasi.

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

export const apiInterceptor: HttpInterceptorFn = (req, next) => {
  const modifiedReq = req.clone({
    body: { title:"Modified Request Body",id: 1 },
  });
  return next(modifiedReq);
};

Mengejek untuk Menguji Senario

Pembangun boleh mensimulasikan situasi pelayan yang berbeza tanpa bergantung pada perkhidmatan hujung belakang secara langsung dengan menggunakan pemintas untuk mengejek respons HTTP semasa ujian. Kaedah ini membolehkan anda menilai pelbagai senario dengan betul.

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

export const eventLoggingInterceptor: HttpInterceptorFn = (req, next) => {
    // Mock response for testing
    if (req.url.endsWith('/test')) {
    const mockResponse = { id: 1, title: 'Test Data' };
    return of(new HttpResponse({ status: 200, body: mockResponse }));
  }
    // Pass through to actual HTTP request
    return next(req);
}

Ralat Pengendalian dan Mekanisme Cuba Semula

Pemintas Sudut meningkatkan aplikasi dengan melaksanakan strategi pengendalian ralat, seperti mencuba semula permintaan yang gagal secara automatik dan mengubah respons ralat untuk meningkatkan pengalaman pengguna.

import { HttpInterceptorFn } from '@angular/common/http';
import { catchError,retry, throwError } from 'rxjs';

export const apiInterceptor: HttpInterceptorFn = (req, next) => {
  return next(req).pipe(
    retry(3), // Retry failed requests up to 3 times
    catchError((error) => {
      console.error('HTTP Error:', error);
      return throwError(error);
    })
  );
};

Di sini, pemintas mencuba semula permintaan yang gagal sehingga tiga kali sebelum mengendalikan ralat, memastikan beberapa percubaan untuk berjaya menyelesaikan permintaan itu.

Pemintas Rantai dan Perintah Pelaksanaan Kawalan

Dalam Angular, pembangun boleh memautkan berbilang pemintas, setiap satu mengurus aspek pemprosesan permintaan yang berbeza seperti pengesahan, pengelogan atau pengendalian ralat. Ia dijalankan mengikut susunan yang didaftarkan, membenarkan pengubahsuaian permintaan dan respons yang tepat, memastikan pengurusan aliran kerja yang fleksibel untuk kefungsian aplikasi yang dipertingkatkan.

import { HttpInterceptorFn, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';

// First Interceptor: Authentication
export const authInterceptor: HttpInterceptorFn = (req, next) => {
  const authReq = req.clone({
    setHeaders: {
      Authorization: `Bearer YOUR_TOKEN`
    }
  });
  return next(authReq);
};

// Second Interceptor: Logging
export const loggingInterceptor: HttpInterceptorFn = (req, next) => {
  console.log('Request URL:', req.url);
  return next(req).pipe(
    tap(event => {
      if (event instanceof HttpResponse) {
        console.log('Response Status:', event.status);
      }
    })
  );
};

// Third Interceptor: Error Handling
export const errorHandlingInterceptor: HttpInterceptorFn = (req, next) => {
  return next(req).pipe(
    retry(3),
    catchError((error) => {
      console.error('HTTP Error:', error);
      return throwError(error);
    })
  );
};

// Registering Interceptors in Angular Module

export const appConfig: ApplicationConfig = {
  providers: [
    ...
    provideHttpClient(
      withInterceptors([apiInterceptor,loggingInterceptor,errorHandlingInterceptor])
    ),
  ],
};

Pengendalian Acara dan Interaksi DOM

Pemintas sudut mempunyai keupayaan untuk memintas peristiwa dan interaksi DOM sebelum Angular memprosesnya. Fungsi ini membolehkan tugas seperti mengelog interaksi pengguna, menguatkuasakan dasar pengendalian acara seluruh aplikasi atau menjalankan pengesahan tambahan sebelum penyebaran acara dalam aplikasi.

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

export const eventLoggingInterceptor: HttpInterceptorFn = (req, next) => {
  document.addEventListener('click', (event) => {
    console.log('Click event intercepted:', event);
    // Additional custom event handling logic
  });
  return next(req);
};

Pemintasan menggunakan Alat Luaran

Alat pemintasan HTTP luaran boleh menjadi sangat berguna dalam pelbagai senario, terutamanya apabila anda memerlukan lebih kawalan ke atas permintaan dan respons HTTP anda melebihi apa yang tersedia dalam pemintas terbina dalam. Ia amat berfaedah untuk menguji dan menyahpepijat API, mensimulasikan keadaan pelayan yang berbeza dan memastikan aplikasi anda mengendalikan pelbagai kes kelebihan dengan berkesan.

Requestly ialah salah satu alat berkuasa yang meningkatkan aliran kerja pembangunan anda. Sebagai contoh, katakan anda sedang membangunkan aplikasi dan perlu menguji cara aplikasi itu mengendalikan respons rangkaian yang perlahan.

• Pemasangan dan Konfigurasi: Pasang Requestly dengan mudah sebagai sambungan penyemak imbas dan sediakan peraturan untuk memintas dan mengubah suai permintaan dan respons HTTP.
• Pengurusan Peraturan: Tentukan dan urus set peraturan berdasarkan URL, pengepala atau parameter pertanyaan untuk memintas permintaan mengikut kriteria tertentu.
• Minta Pengubahsuaian: Ubah suai permintaan dengan menambahkan pengepala, menulis semula URL atau mengubah hala permintaan berdasarkan peraturan yang telah ditetapkan, memudahkan ujian dinamik dan senario penyahpepijatan.
• Kes Penggunaan Terperinci: Gunakan Permintaan untuk mensimulasikan respons pelayan yang berbeza, mengejek titik akhir untuk tujuan ujian atau menguatkuasakan keadaan rangkaian tertentu semasa pembangunan.

Kesimpulan

Pemintas sudut ialah alat yang sangat diperlukan untuk mengurus komunikasi HTTP dan meningkatkan keteguhan aplikasi Sudut. Dengan menguasai kaedah dan meneroka penyelesaian luaran seperti Requestly, pembangun boleh menyelaraskan integrasi API, meningkatkan amalan keselamatan dan mengoptimumkan prestasi dengan berkesan. Terima pemintas untuk meningkatkan kebolehpercayaan dan kebolehskalaan aplikasi Sudut anda dalam mengendalikan interaksi bahagian belakang yang pelbagai dengan keyakinan dan kecekapan.

Atas ialah kandungan terperinci Memahami Pemintas Sudut : Melangkaui HTTP. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!