วิธีใช้ Interceptors ใน Angular

การพัฒนาส่วนหน้าสำหรับแอปพลิเคชันแบบหน้าเดียว (SPA) กำลังเติบโตอย่างรวดเร็วในยุคปัจจุบันเนื่องจากประโยชน์ที่ไม่มีใครเทียบได้ ในบทความนี้เราจะพูดถึงแนวคิดหลักประการหนึ่งที่ Angular ได้นำมาใช้ภายในกรอบของมันคือ interceptors เราจะดูคร่าวๆว่าตัวสกัดกั้นคืออะไรใช้อย่างไรและประโยชน์ของการใช้งานในแอปพลิเคชันของเรามีอะไรบ้าง เริ่มกันเลย!

Interceptors คืออะไร?

เพื่อเพิ่มขนาดแอปพลิเคชันขนาดใหญ่ Angular มีเครื่องมือในตัวที่หลากหลายเพื่ออำนวยความสะดวกในกระบวนการพัฒนา Interceptors เป็นหนึ่งในเครื่องมือในตัวที่ทรงพลังที่สุดใน Angular ที่ใช้จัดการคำขอ HTTP ที่ต้นทางจากส่วนกลางหรือในระดับโลก เนื่องจากพวกเขาเกี่ยวข้องกับคำขอ HTTP และรอบการตอบสนองดังนั้นจึงมักเรียกว่า HTTP interceptors การวางลอจิกที่ใช้กันทั่วไปในระดับแอปพลิเคชันและการเปิดใช้งานโฟลว์โค้ดเพื่อใช้ตรรกะนั้นในรันไทม์เป็นแนวคิดที่ยอดเยี่ยมมากที่ช่วยลดความซ้ำซ้อนในโค้ดและด้วยเหตุนี้จึงก่อให้เกิดโค้ดเบสที่สะอาดบำรุงรักษาและปรับขนาดได้

วิธีทั่วไปในการใช้ HTTP Interceptors

ตอนนี้เรามาดูกรณีการใช้งานยอดนิยมบางส่วน (พร้อมรหัส) ซึ่งการใช้ interceptors สามารถพิสูจน์ได้ว่าเป็นประโยชน์ ก่อนดำเนินการตามกรณีการใช้งานเรามาทำความเข้าใจกันก่อนว่าเราจะสร้างตัวสกัดกั้นได้อย่างไร

คุณสามารถสร้างไฟล์ TypeScript แยกต่างหากสำหรับตัวสกัดกั้นดังต่อไปนี้

// PACKAGE IMPORTS
import {
   HttpEvent,
   HttpInterceptor,
   HttpHandler,
   HttpRequest,
   HttpErrorResponse
} from ‘@angular/common/http';
import {
   Observable,
   throwError
} from 'rxjs';
import {
   catchError
}
from 'rxjs/operators';
// INTERCEPTOR CLASS
export class DummyInterceptor implements HttpInterceptor
{
   intercept(request: HttpRequest<any>, next: HttpHandler):
Observable<HttpEvent<any>>
   {
      return next.handle( request)
   }
}

เมื่อเข้าใจวิธีสร้างโครงร่างพื้นฐานสำหรับตัวสกัดกั้นแล้วเรามาทำความเข้าใจกับกรณีการใช้งานของมันทันที

การจัดการข้อผิดพลาด

บ่อยครั้งเราทำชุดขั้นตอนทั่วไปเมื่อใดก็ตามที่เราพบข้อผิดพลาดในการตอบสนอง สมมติว่าคุณต้องการแสดงป๊อปอัปเมื่อเกิดข้อผิดพลาดหรือง่ายๆเพียงแค่บันทึกข้อผิดพลาดในระหว่างขั้นตอนการพัฒนาคุณสามารถสร้างตัวสกัดกั้นที่สามารถทำสิ่งนี้ให้คุณและบันทึกความซ้ำซ้อนของโค้ดได้

// INTERCEPTOR CLASS
export class ErrorInterceptor implements HttpInterceptor
{
   intercept(request: HttpRequest<any>, next: HttpHandler):
Observable<HttpEvent<any>>
   {
      return next.handle( request)
        .pipe(
           catchError((error: HttpErrorResponse) =>
           {
              if (error.status === 404)
              {
                 console. log('Object Not Found Error');
              }
              return throwError(errorMsg) ;
           }))
    }
}

การจัดการส่วนหัว

คุณยังสามารถใช้ตัวสกัดกั้นเพื่อจัดการส่วนหัวของคำขอได้อีกด้วย สมมติว่าคุณต้องเพิ่มคีย์ใหม่ลงในส่วนหัวหรือแก้ไขคีย์ที่มีอยู่คุณสามารถทำได้ใน interceptor แยกต่างหากสำหรับส่วนหัว

// INTERCEPTOR CLASS
export class RequestHeaderInterceptor implements HttpInterceptor
{
   intercept(request: HttpRequest<any>, next: HttpHandler):
Observable<HttpEvent<any>>
   {
      const newRequest = req.clone({
         setHeaders: { "Encrypted-Code": "qwTg345DFhgJFS5Thd9j" }
      });
      return next.handle(newRequest);
   }
}

สำหรับทุกรอบการร้องขอและการตอบกลับมีความล่าช้าของเครือข่ายที่ผู้ใช้ต้องเผชิญก่อนที่จะเห็นการตอบกลับจริง ส่วนใหญ่แอปพลิเคชันจะแสดงตัวโหลดเมื่อผู้ใช้ส่งคำขอเพื่อให้พวกเขาทราบอย่างชัดเจนว่าการตอบกลับกำลังได้รับการประมวลผล เป็นกลยุทธ์ UX ที่มีประสิทธิภาพ ตามหลักการแล้วเราต้องการแสดงตัวโหลดสำหรับความล่าช้าในทุกรอบการตอบสนองคำขอแทนที่จะทำเช่นนั้นในทุกบริการแยกกันทำไมไม่เพียงแค่สร้างตัวสกัดกั้นสำหรับสิ่งนั้น

// INTERCEPTOR CLASS
export class LoaderInterceptor implements HttpInterceptor
{
   intercept(request: HttpRequest<any>, next: HttpHandler):
Observable<HttpEvent<any>>
   {
      const loaderService = this.injector.get(LoaderService);
      loaderService.show();
      return next.handle(req)
         .pipe(
            delay(5000),
            finalize(() => loaderService.hide()));
   }
}

การกำหนดค่าการแจ้งเตือน

เราจัดการกับป๊อปอัปอย่างไรเรายังสามารถกำหนดค่าตรรกะสำหรับการแจ้งเตือนในตัวดักจับได้ตามวิธีที่เราต้องการจัดการ

// INTERCEPTOR CLASS
export class NotificationInterceptor implements HttpInterceptor
{
   intercept(request: HttpRequest<any>, next: HttpHandler):
Observable<HttpEvent<any>>
   {
      return next.handle(req)
         .pipe(
            tap((event: HttpEvent<any>) =>
            {
               if (event instanceof HttpResponse & event.status === 201)
               {
                  // Or any other custom logic
                  console. log("Successfully created object.");
               }
            }));
   }
}

นี่เป็นเพียงบางกรณีการใช้งานทั่วไปในการใช้เครื่องสกัดกั้น กรณีการใช้งานอื่น ๆ ที่คล้ายกันของการใช้ตัวสกัดกั้นสามารถฉีดโทเค็นการตรวจสอบสิทธิ์การจัดการ URL การแคชการทำโปรไฟล์ / การบันทึกการแปลงรูปแบบ ฯลฯ

ประโยชน์ของการใช้ Interceptors

ตอนนี้เรามาดูกันว่าเราสามารถใช้ประโยชน์จากตัวดักจับ HTTP ของ Angular ได้อย่างไรในรูปแบบที่สร้างสรรค์มากมาย พวกเขามอบประโยชน์มากมายให้กับกระบวนทัศน์การพัฒนาแอปพลิเคชันสมัยใหม่ ต่อไปนี้เป็นประโยชน์หลักบางประการของการใช้เครื่องสกัดกั้น

1. ความสามารถในการใช้โค้ดซ้ำ - เนื่องจากเราคาดว่าจะดำเนินการชุดขั้นตอนทั่วไปบางอย่างกับคำขอและการตอบกลับ HTTP ส่วนใหญ่เราจึงสามารถเขียนตรรกะได้ในที่เดียวและเปิดใช้งานการร้องขอและขั้นตอนการตอบกลับเพื่อใช้ตรรกะนั้น ด้วยวิธีนี้แทนที่จะจำลองตรรกะเดียวกันทีละระดับในระดับบริการเราเขียนว่าครั้งเดียวและด้วยเหตุนี้จึงสร้างโค้ดซ้ำซ้อนน้อยลงมากซึ่งเป็นแนวทางปฏิบัติที่สะอาดที่จะปฏิบัติตาม
2. ความสามารถในการปรับขนาด - จุดนี้เชื่อมโยงกับจุดแรกในลักษณะที่เป็นส่วนขยายของแนวคิดที่ระบุไว้ก่อนหน้านี้ หากโค้ดสามารถนำมาใช้ซ้ำได้ก็จะทำให้รู้สึกได้โดยอัตโนมัติว่าการปรับขนาดโค้ดและการออกแบบจะง่ายขึ้นมาก
3. ชั้นบริการที่ดีขึ้น - เนื่องจากเราสามารถจัดการกิจกรรมที่เกี่ยวข้องโดยใช้เครื่องสกัดกั้นเราจึงไม่จำเป็นต้องสร้างมลพิษให้กับชั้นบริการด้วยการจัดการสิ่งอื่น ๆ นั้น ด้วยวิธีนี้ชั้นบริการจะสะอาดตรงประเด็นและจะทำในสิ่งที่รับผิดชอบเท่านั้น

นั่นคือทั้งหมดที่เกี่ยวกับตัวดักจับ HTTP ใน Angular แนวคิดที่น่าสนใจใช่มั้ย? หวังว่าหลังจากอ่านสิ่งนี้แล้วนักพัฒนาจะรู้สึกมีแรงบันดาลใจมากขึ้นในขณะที่ออกแบบบริการ Angular ใช้ประโยชน์จาก interceptors และรักษาตรรกะของบริการให้สั้นกระชับตรงประเด็นบำรุงรักษาได้และปรับขนาดได้