چگونه از Http Interceptors استفاده کنیم تا درخواست های HTTP و خطاها را مدیریت کنیم

انگولار

Interceptors ها در AngularJS وجود داشتند، اما در نسخه های اولیه انگولار وجود نداشت. ازنسخه 4.3 بود که ابزارهای HTTP تازه ای مانند اینترفیس HttpInterceptor به انگولار اضافه شد.

پیش نیاز ها

شما به nodejs8.120 و npmv6.4.1 و همچنین انگولار CLI احتیاج دارید. سپس با کمک CLI پروژه انگولار را ایجاد میکنید. برای ظاهر مناسب اپلیکیشن، کامپوننت انگولار متریال را نصب کردیم.

ایجاد Angular Interceptor

پوشه ای با نام interceptor در پوشه app ایجاد کنید. فایلی با نام httpconfig.interceptor.ts در این پوشه ایجاد کنید.

در فایل httpconfig.interceptor.ts مسیرهای زیر را فراخوانی کنید.


import { Injectable } from '@angular/core';
import { ErrorDialogService } from '../error-dialog/errordialog.service';
import {
 HttpInterceptor,
 HttpRequest,
 HttpResponse,
 HttpHandler,
 HttpEvent,
 HttpErrorResponse
} from '@angular/common/http';
 import { Observable, throwError } from 'rxjs';
import { map, catchError } from 'rxjs/operators';

در انگولار 6 و 7 map به مسیر rxjs/operators منتقل شده است. در زمان مسیرده ای به این نکته توجه کنید.

کلاسی با نام HttpConfigInterceptor ایجاد کنید و اینترفیس HttpInterceptor پیاده سازی کنید.

در این مثال، شما توکن، Content-Type و Accept type را در درخواست API مدیریت میکنید.


intercept(request: HttpRequest, next: HttpHandler): Observable<httpevent> {
 const token: string = localStorage.getItem('token');

if (token) {
 request = request.clone({ headers: request.headers.set('Authorization', 'Bearer ' + token) });
 }
if (!request.headers.has('Content-Type')) {
 request = request.clone({ headers: request.headers.set('Content-Type', 'application/json') });
 }
request = request.clone({ headers: request.headers.set('Accept', 'application/json') });
return next.handle(request).pipe(
 map((event: HttpEvent) => {
 if (event instanceof HttpResponse) {
 console.log('event--->>>', event);
 }
 return event;
 }));
 }

در مثال بالا ما میتوانیم توکن، Content-Type و Accept type را در درخواست API مدیریت میکنیم. با اینکار درخواست API را مدیریت میکنیم.

 
map((event: HttpEvent) => {
 if (event instanceof HttpResponse) {
 console.log('event--->>>', event);
 // this.errorDialogService.openDialog(event);
 }
 return event;
 }),

در مثال بالا پاسخ API را مدیریت کردیم. با اینکار میتوانیم دانه به دانه APIها را مدیریت کنیم.

برای مدیریت خطاها، نیاز است ماژول rxjs را فراخوانی کنیم.

 
import { map, catchError } from 'rxjs/operators';

با استفاده از کد زیر پاسخ خطاها را مدیریت میکنیم.

 
catchError((error: HttpErrorResponse) => {
 let data = {};
 data = {
 reason: error &amp;&amp; error.error.reason ? error.error.reason : '',
 status: error.status
 };
 this.errorDialogService.openDialog(data);
 return throwError(error);
 })

در اینجا errorDialogService ایجاد کردیم تا خطاها را مدیریت و برای کاربران پیام خطا ارسال کند.

قبل از آن نیاز است httpconfig.interceptor.ts را در AppModule فراخوانی کنیم.

 
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { HttpConfigInterceptor} from './interceptor/httpconfig.interceptor';

کلاس خود را در provider اضافه کنید. برای مدیریت multiple interceptor لازم است مقدار multi برابر با true باشد.

 
providers: [
{ provide: HTTP_INTERCEPTORS, useClass: HttpConfigInterceptor, multi: true }
]

ایجاد سرویس برای مدیرت خطاها

برای مدیریت خطا لازم است سرویس جدیدی با نام errordialof.sercive.ts ایجاد شود و کدهای زیر را به آن فایل اضافه کنید.


import { Injectable } from '@angular/core';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
import { ErrorDialogComponent } from './errordialog.component';

@Injectable()
export class ErrorDialogService {

constructor(public dialog: MatDialog) { }
 openDialog(data): void {
 const dialogRef = this.dialog.open(ErrorDialogComponent, {
 width: '300px',
 data: data
 });

dialogRef.afterClosed().subscribe(result => {
 console.log('The dialog was closed');
 let animal;
 animal = result;
 });
 }
}

برای نمایش خطاها کامپوننت errordialog.component ایجاد کنید.


import { Component, Inject } from '@angular/core';
import { MAT_DIALOG_DATA } from '@angular/material';
@Component({
 selector: 'app-root',
 templateUrl: './errordialog.component.html'
})
anexport class ErrorDialogComponent {
 title = 'Angular-Interceptor';
 constructor(@Inject(MAT_DIALOG_DATA) public data: string) {}
}

 
<div>
  <div>
    <p>
      Reason: {{data.reason}}
    </p>
    <p>
      Status: {{data.status}}
    </p>
  </div>
</div>

سپس فایل errordialof.sercive و کامپوننت errordialog.component را به AppModule اضافه کنید.

ایجاد فایل سرویس نمونه برای درخواست HTTP

ما فایل سرویس نمونه برای فراخوانی API داریم.

سرویسی با نام login.service.ts ایجاد میکنیم.


import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
// import 'rxjs/operator/map';

@Injectable()
export class LoginService {

constructor(private http: HttpClient) { }

login(data) {
 data = { email: 'admin', password: 'admin' };
 return this.http.post('http://localhost:3070/api/login', data);
 }
getCustomerDetails() {
 return this.http.get('http://localhost:3070/customers/details');
 }

فانکشن هایی برای فراخوانی دو API اضافه میکنیم

فراخوانی HTTP client service در app component

ما دو فانکشن را در app.componet.ts صدا زدیم. Login API را در زمان لود و دیگری را در فانکشن کلیک.

توجه داشته باشید که بک اند جداگانه ای در localhost:3070 در حال اجرا است.


import { Component } from '@angular/core';
import { LoginService } from './services/login.service';
@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.scss']
})
export class AppComponent {
 title = 'Angular-Interceptor';
 constructor(public loginService: LoginService) {
 this.loginService.login({}).subscribe(data => {
 console.log(data);
 });
 }
getCustomerDetails() {
 this.loginService.getCustomerDetails().subscribe((data) => {
 console.log('----->>>', data);
 });
 }
}

 
<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align: center">
  <h1>Welcome to {{title}}<h1>
  <img width="300" alt="Angular Logo" arc="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Here are some links to help you start:</h2>
<ul>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
  </li>
  <li>
    <h2><p (click)="getCustomerDetails()">Get customer details</p></h2>
  </li>
</ul>
<router-outlet></router-outlet>

تصویر مودال خطا بصورت زیر است

تصویر مودال خطا

شما میتوانید پروژه را از GitHub دانلود کنید.

به نقل از: Digital Ocean

نوشتن دیدگاه

JComments

مقالات طراحی سایت