การโหลดไฟล์ตั้งค่าใน Angular ด้วย Fetch วิธีป้องกันการแคชด้วย Timestamp

เมื่อเราพัฒนาแอปพลิเคชัน Angular ที่มีหลากหลาย Environment สิ่งที่สำคัญคือการตั้งค่าที่สามารถปรับเปลี่ยนได้ตามสภาพแวดล้อม เช่น การตั้งค่าสำหรับการพัฒนา (development) และการใช้งานจริง (production) ซึ่งการตั้งค่าเหล่านี้มักถูกเก็บไว้ในไฟล์แยกต่างหาก เช่น ไฟล์ JSON ที่เราสามารถโหลดเข้ามาในแอปได้

ในบทความนี้ ผมจะพามาตั้งค่าจากไฟล์ JSON ในโฟลเดอร์ assets และนำข้อมูลที่ได้มาใช้ในการตั้งค่าแอป ก่อนที่จะบูตโมดูลหลักของ Angular ซึ่งเป็นแนวทางที่ง่ายและยืดหยุ่นในการตั้งค่าตัวแอปพลิเคชัน

การทำงานของโค้ด

โค้ดตัวอย่างที่ผมกำลังจะพูดถึงนั้นเริ่มต้นด้วยการโหลดไฟล์ JSON และต่อด้วยการบูตแอป Angular ตามลำดับ โดยใช้ fetch เพื่อดึงข้อมูลจากไฟล์การตั้งค่า และใช้ platformBrowserDynamic เพื่อเริ่มโมดูลหลักของแอปพลิเคชัน เราจะมาดูโค้ดทีละบรรทัดและอธิบายการทำงานของแต่ละส่วนกัน

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment'; // สร้าง data เอานะครับ
import { DateUtil } from './app/shared/util/date-util'; // https://boychawin.com/2024/10/09/using-luxon-for-date-time-management

fetch('./assets/data/ui-app-config.json?t=' + DateUtil.nowDate().getTime())
  .then((response) => {
    return response.json();
  })
  .then((data) => {
    Object.assign(environment, data);

    platformBrowserDynamic()
      .bootstrapModule(AppModule)
      .catch((err) => console.error(err));
  });

เริ่มต้นด้วยการนำเข้าฟังก์ชันและโมดูลที่จำเป็นต่อการบูตแอป

• platformBrowserDynamic: ฟังก์ชันนี้ใช้สำหรับบูตแอป Angular ในบราวเซอร์
• AppModule: เป็นโมดูลหลักที่ประกอบด้วยส่วนต่างๆ ของแอป
• environment: เก็บค่าการตั้งค่าแอปที่สามารถเปลี่ยนแปลงได้ตามสภาพแวดล้อม (เช่น dev หรือ prod)
• DateUtil: ช่วยให้เราดึงวันที่และเวลาปัจจุบัน ซึ่งจะนำไปใช้ในการสร้าง query parameter เพื่อลดปัญหาการแคช

การโหลดไฟล์ JSON

ในโค้ดนี้ เราใช้ fetch เพื่อดึงข้อมูลจากไฟล์ ui-app-config.json ที่อยู่ในโฟลเดอร์ assets/data. เพื่อป้องกันปัญหาการแคชของไฟล์ระหว่างการพัฒนา เราใช้ DateUtil.nowDate().getTime() ในการสร้าง query parameter ?t= ที่จะเป็นเวลาปัจจุบัน ทำให้ทุกครั้งที่โหลดไฟล์จะเป็นเวอร์ชันล่าสุดเสมอ

fetch('./assets/data/ui-app-config.json?t=' + DateUtil.nowDate().getTime())

การใส่ query parameter นี้ช่วยให้มั่นใจว่าไฟล์ที่โหลดมานั้นไม่ใช่เวอร์ชันที่ถูกแคชจากครั้งก่อนหน้า การแปลงข้อมูล JSON

เมื่อได้รับ response จาก fetch แล้ว เราจะใช้ .then((response) => response.json()) เพื่อแปลงข้อมูลจาก JSON ที่อยู่ในรูปแบบข้อความให้กลายเป็น JavaScript object ที่สามารถใช้งานได้

.then((response) => {
  return response.json();
})

การรวมข้อมูลเข้ากับ environment

หลังจากแปลงข้อมูลจาก JSON มาแล้ว เราจะนำข้อมูลนี้ไปรวมเข้ากับ environment โดยใช้ Object.assign(). ฟังก์ชันนี้จะช่วยให้ข้อมูลจาก JSON เข้าไปแทนที่หรือเติมเต็มใน environment ที่มีอยู่แล้ว

.then((data) => {
  Object.assign(environment, data);

การบูตแอป Angular

เมื่อการตั้งค่าเสร็จสิ้นแล้ว ก็ถึงเวลาบูตแอปพลิเคชัน โดยใช้ platformBrowserDynamic().bootstrapModule(AppModule) ซึ่งจะทำการบูต AppModule ที่เป็นโมดูลหลักของแอป

platformBrowserDynamic()
  .bootstrapModule(AppModule)
  .catch((err) => console.error(err));

หากเกิดข้อผิดพลาดระหว่างการบูต เราสามารถดูข้อมูลข้อผิดพลาดได้ในคอนโซลด้วย .catch((err) => console.error(err)).

สรุป

เป็นการตั้งค่าแอป Angular โดยโหลดข้อมูลจากไฟล์ JSON เข้ามาก่อนที่จะบูตโมดูลหลัก การใช้ fetch กับ query parameter เวลาปัจจุบันช่วยป้องกันปัญหาการแคช และทำให้การตั้งค่าแอปพลิเคชันสามารถปรับเปลี่ยนได้