מדריך Angular – שימוש ב-HTTP Client לאינטראקציה עם API חיצוניים

מדריך Angular – שימוש ב-HTTP Client לאינטראקציה עם API חיצוניים

לאחר שלמדנו במאמר הקודם לעבוד עם RxJs – במאמר זה נלמד באופן כללי על עבודה עם שירותי רשת ( Web Services ) תוך שימוש ב HttpClient.

מבוא

במאמר זה נלמד כיצד להשתמש ב-HTTP Client באנגולר כדי לאינטראקציה עם API חיצוניים. נבין כיצד לבצע בקשות HTTP, לנהל תגובות ולהתמודד עם שגיאות. נשווה את HTTP Client לעומת פתרונות אחרים ונראה דוגמאות קוד מפורטות לכל שלב.

מהו HTTP Client?

HTTP Client הוא שירות שמאפשר לבצע בקשות HTTP באנגולר בצורה קלה ויעילה. הוא מספק ממשק נוח לעבוד עם API חיצוניים ולשלוח נתונים לשרת ולקבלם ממנו. HTTP Client נבנה על גבי מודול ה-HTTP של אנגולר, והוא מספק כלים מתקדמים לעבודה עם פרוטוקול HTTP.

התקנת מודול HTTP Client

לפני שנוכל להשתמש ב-HTTP Client, עלינו להוסיף את המודול לפרויקט אנגולר שלנו. נתחיל בהתקנת המודול באמצעות npm:

npm install @angular/common@latest

לאחר ההתקנה, נעדכן את הקובץ app.module.ts כדי לכלול את HttpClientModule:

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

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

שליחת בקשות HTTP

כעת, כשהמודול מותקן ומוגדר, נוכל להתחיל להשתמש ב-HTTP Client לשליחת בקשות HTTP. נתחיל בבקשות GET. ניצור שירות חדש שישתמש ב-HTTP Client לשליחת הבקשות:

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

@Injectable({
  providedIn: 'root'
})
export class ApiService {

  private apiUrl = 'https://api.example.com/data';

  constructor(private http: HttpClient) { }

  getData(): Observable<any> {
    return this.http.get<any>(this.apiUrl);
  }
}

עבודה עם תגובות

לאחר ששלחנו בקשה, עלינו לנהל את התגובה שמתקבלת מהשרת. נוכל לעשות זאת באמצעות מנוי ל-Observable שמחזירה הפונקציה getData:

import { Component, OnInit } from '@angular/core';
import { ApiService } from './api.service';

@Component({
  selector: 'app-data',
  template: `
    <div *ngIf="data">
      <pre>{{ data | json }}</pre>
    </div>
  `,
  styles: []
})
export class DataComponent implements OnInit {

  data: any;

  constructor(private apiService: ApiService) { }

  ngOnInit(): void {
    this.apiService.getData().subscribe(response => {
      this.data = response;
    });
  }
}

שליחת בקשות POST

מלבד בקשות GET, נוכל לשלוח גם בקשות POST כדי לשלוח נתונים לשרת. נעדכן את השירות שלנו כדי לכלול פונקציה לשליחת בקשות POST:

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

@Injectable({
  providedIn: 'root'
})
export class ApiService {

  private apiUrl = 'https://api.example.com/data';

  constructor(private http: HttpClient) { }

  getData(): Observable<any> {
    return this.http.get<any>(this.apiUrl);
  }

  postData(data: any): Observable<any> {
    const headers = new HttpHeaders({ 'Content-Type': 'application/json' });
    return this.http.post<any>(this.apiUrl, data, { headers });
  }
}

התמודדות עם שגיאות

בעת שליחת בקשות HTTP, חשוב לנהל שגיאות שעלולות להתרחש. נוכל לעשות זאת באמצעות הפונקציה catchError מ-RxJS:

import { catchError } from 'rxjs/operators';
import { throwError } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ApiService {

  private apiUrl = 'https://api.example.com/data';

  constructor(private http: HttpClient) { }

  getData(): Observable<any> {
    return this.http.get<any>(this.apiUrl).pipe(
      catchError(this.handleError)
    );
  }

  postData(data: any): Observable<any> {
    const headers = new HttpHeaders({ 'Content-Type': 'application/json' });
    return this.http.post<any>(this.apiUrl, data, { headers }).pipe(
      catchError(this.handleError)
    );
  }

  private handleError(error: any) {
    console.error('An error occurred:', error);
    return throwError('Something went wrong; please try again later.');
  }
}

עבודה עם HttpParams

לעיתים נצטרך לשלוח פרמטרים ב-URL של הבקשה. נוכל לעשות זאת באמצעות HttpParams:

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

@Injectable({
  providedIn: 'root'
})
export class ApiService {

  private apiUrl = 'https://api.example.com/data';

  constructor(private http: HttpClient) { }

  getDataWithParams(params: any): Observable<any> {
    let httpParams = new HttpParams();
    Object.keys(params).forEach(key => {
      httpParams = httpParams.append(key, params[key]);
    });
    return this.http.get<any>(this.apiUrl, { params: httpParams }).pipe(
      catchError(this.handleError)
    );
  }
}

שימוש ב-Interceptors

Interceptors הם כלי חזק לניהול בקשות ותגובות HTTP. נוכל להשתמש בהם כדי להוסיף כותרות, לנהל שגיאות, ולהוסיף לוגיקה לפני ואחרי כל בקשה:

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';
import { tap } from 'rxjs/operators';

@Injectable()
export class LoggingInterceptor implements HttpInterceptor {

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    console.log('Request made:', req);
    return next.handle(req).pipe(
      tap(event => {
        console.log('Response received:', event);
      })
    );
  }
}

כדי להשתמש ב-Interceptor, נרשם אותו בקובץ app.module.ts:

import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { LoggingInterceptor } from './logging.interceptor';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: LoggingInterceptor, multi: true }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

סיכום

במאמר זה למדנו כיצד להשתמש ב-HTTP Client באנגולר כדי לאינטראקציה עם API חיצוניים. הבנו כיצד לשלוח בקשות GET ו-POST, לנהל תגובות ושגיאות, להשתמש בפרמטרים וב-Interceptors. שימוש נכון ב-HTTP Client יכול לשפר את יכולות האינטגרציה של האפליקציה שלך ולספק פתרונות יעילים ומתקדמים.

אם אתם מעוניינים ללמוד בצורה מעמיקה יותר אתם מוזמנים להתייעץ איתנו על קורס אנגולר.

שתפו את הפוסט

דילוג לתוכן