การเรียก API และการจัดการข้อมูล response ใน Angular แบบ Step-by-Step

การเรียก API เพื่อรับส่งข้อมูลใน Angular เป็นสิ่งที่เราต้องทำบ่อย ๆ และมักมีรายละเอียดหลายขั้นตอน โดยเฉพาะการปรับแต่งข้อมูลที่ได้รับให้สอดคล้องกับ Model ที่เราต้องการใช้งาน

วันนี้ผมจะมาอธิบายถึงการเรียก API ใน Angular พร้อมการจัดการข้อมูลใน Model อย่างละเอียดกันครับ

ตั้งค่า Model สำหรับการรับข้อมูล

ขั้นตอนแรกคือการตั้งค่าmodelที่จะใช้เก็บข้อมูลที่ได้รับจาก API ในที่นี้เราจะสร้าง CheckHistory เพื่อเก็บข้อมูลประวัติการสั่งซื้อ โดยตั้งค่าให้อินเทอร์เฟซ ICheckHistory กำหนดประเภทของข้อมูลที่คาดว่าจะได้รับ และใช้ CheckHistory class เพื่อแปลงข้อมูลให้พร้อมใช้งาน

ไฟล์: check-history.model.ts

export interface ICheckHistory {
  orderId?: string[];
  transactionId?: string;
  status: boolean;
  nextUrl?: string;
}

export class CheckHistory implements ICheckHistory {
  orderId: string[] = [];
  transactionId = '';
  status = false;
  nextUrl = '';

  constructor(mobile?: Partial<ICheckHistory>) {
    ObjectUtil.assignByTarget(this, mobile);
    this.orderId = mobile?.orderId ?? [];
  }
}

การใช้ ObjectUtil เพื่อแปลงข้อมูล

บางครั้งข้อมูลที่ได้จาก API อาจจะมีหลายระดับชั้นของ Object ObjectUtil จึงเข้ามาช่วยโดยทำการคัดลอกข้อมูลจาก source ไปยัง target อย่างละเอียดทุกระดับชั้น

ไฟล์: object-utils.ts

export class ObjectUtil {
  static assignByTarget(target: any, source: any) {
    for (const [key, value] of Object.entries(target)) {
      if (
        typeof value === 'object' &&
        value !== null &&
        typeof source === 'object' &&
        source.hasOwnProperty(key)
      ) {
        ObjectUtil.assignByTarget(value, source[key]);
      } else if (typeof source === 'object' && source && key in source) {
        target[key] = source[key] !== undefined ? source[key] : value;
      }
    }
  }
}

ตัวอย่างวิธีเรียกใช้ API และจัดการข้อมูลที่ได้มา

ต่อมาเป็นการเขียนฟังก์ชัน checkHistoryOrder() เพื่อเรียก API ด้วย HttpClient ของ Angular แล้วใช้ map ของ RxJS เพื่อจัดการข้อมูลที่ได้ ให้สอดคล้องกับ Model CheckHistory ที่เราได้สร้างไว้

ไฟล์: app.component.ts

import { Observable, map } from 'rxjs';
import { CheckHistory } from './check-history.model';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent {
  title = 'myapp';

  constructor(
    private httpClient: HttpClient
  ) { }

  checkHistoryOrder(mobileNo: string): Observable<CheckHistory> {
    const body = {
      mobileNo: mobileNo,
    };
    const url = `...`;

    return this.httpClient
      .post<CheckHistory>(url, body)
      .pipe(map((item) => new CheckHistory(item)));
  }
}

สรุป

การใช้ RxJS สำหรับจัดการการเปลี่ยนแปลงข้อมูลที่ได้รับจาก API และการใช้ Utility อย่าง ObjectUtil สามารถช่วยทำให้การแปลงข้อมูลง่ายขึ้นมาก