משיכת מידע מ-API

משיכת מידע מ-API באנגולר מתבצע ע"י HttpClientModule. לפני שמתחילים לעבוד צריך להוסיף את HttpClientModule למודול הראשי ולרשימת הייבוא.

ב-service עצמו שבו אנחנו מושכים את המידע נייבא את HttpClient ונכניס אותו כ-dependency ל-constructor.

אפשר להשתמש בפונקציות שמושכות את המידע מה-API התוך ה-class של הקומפוננטה עצמה, אבל מקובל לבנות קובץ service שמטפל בכל העבודה מול ה-DB וכך גםאפשר לפנות אליו מכל קומפוננטה.

מה צריך כדי לפנות ל-API?

אנחנו משתמשים ב-API על מנת להתחבר למאגר נתונים מסויים. ל-API יש כתובת שאליה ניגשים כדי לקבל את המידע.

לבקשה מ-API יש:

הכתובת שאליה מתחברים, Endpoint.

סוג הבקשה שאנחנו שולחים: get, post, put, patch, delete.

מידע נוסף שנשלח ב-Headers. לא תמיד נצטרך לגעת בו.

גוף הבקשה שאנחנו שולחים לסרבר.

שלבי התהליך

הצעדים בגישה לשרת הם:

1. Http מקבל בקשה מתוך ה-service שלנו.
2. אנחנו מקבלים חזרה את המידע כ-observable ומכניסים אותו ל-type המתאים.
3. מבצעים Subscribe ל-observable מהקומפוננטה שבה אנחנו צריכים את המידע.
4. מכניסים את המידע למשתנה מקומי ומשתמשים בו.

אם הפעולה מצליחה, נקבל ערך של הצלחה. אם לא, נקבל ערך שגיאה.

התהליך בקוד

1. שולחים את הבקשה לשרת

בקוד פה אנחנו רואים שליחה של בקשת get ל-API. ב-API תהיה נקודת קצה על פי הכתובת שהכנסנו. בדוגמא הזאת יש פנייה לקובץ JSON מקומי ולא לשרת חיצוני.

employee.service.ts

constructor(private httpClient: HttpClient){}

// The server url
private url: string = "/assets/data/employees.json";

getEmployees(){
    return this.httpClient.get(this.url);
}

2. קבלת המידע בצורה הנכונה

כדי לקבל את המידע באובייקט שאנחנו רוצים ניצור Interface של האובייקט.

employee.ts

export interface IEmployee{
    id: number,
    name: string,
    age: number
}

נשנה את הפונקציה ב-service כך שתתאים לאובייקט שלנו.

service.ts

getEmployees(): Observable<IEmployee[]>{
    return this.httpClient.get<IEmployee[]>(this.url);
}

3. שימוש במידע בקומפוננטה

employees-list.ts

public employees = [];
constructor(private employeeService: EmployeeService){}

ngOnInit(){
    this.employeeService.getEmployees().subscribe(data => 
        this.employees = data
    );
}

עכשיו אפשר לחבר את המשתנה employees שמכיל את המידע לקובץ ה-HTML.

טיפול בשגיאות

יש לנו אפשרות לתפוס את השגיאות בדרך אל הבקשה שלנו.

employees-list.ts

public employees = [];
constructor(private employeeService: EmployeeService){}

ngOnInit(){
    this.employeeService.getEmployees().subscribe(
        data => {
            this.employees = data
        },
        error => {
            console.log(error.message);
        }     
    );
}