🚀How to fetch API in Proper way & Add additional features 🌟

// 🌐 API Endpoint
const apiURL = 'https://jsonplaceholder.typicode.com/photos';

// 🔄 Fetch and Cache Data Function
const fetchDataAndCache = async () => {
  try {
    const startTime = performance.now();

    // 📦 Check if data exists in cache
    const cachedData = sessionStorage.getItem('cachedData');
    if (cachedData) {
      const dataFromCache = JSON.parse(cachedData);
      const dataSizeInKB = JSON.stringify(dataFromCache).length / 1024;
      console.log('🗃️ Data Loaded from Cache - Size:', dataSizeInKB.toFixed(2), 'KB');
      processData(dataFromCache, 'cache');
    } else {
      // 🌐 Fetch data from API if not in cache
      const response = await fetch(apiURL);
      if (!response.ok) {
        throw new Error('❌ Network response was not ok.');
      }
      const dataFromAPI = await response.json();
      sessionStorage.setItem('cachedData', JSON.stringify(dataFromAPI));
      const dataSizeInKB = JSON.stringify(dataFromAPI).length / 1024;
      console.log('🌐 Data Loaded from API - Size:', dataSizeInKB.toFixed(2), 'KB');
      processData(dataFromAPI, 'api');
    }

    const endTime = performance.now();
    console.log('⏱️ Fetch API Time:', endTime - startTime, 'ms');

    let fetchCount = parseInt(sessionStorage.getItem('fetchCount')) || 0;
    fetchCount++;
    sessionStorage.setItem('fetchCount', fetchCount);
    console.log('🔢 Fetch Count:', fetchCount);
  } catch (error) {
    console.error('❗ Fetch API Error:', error.message);
    console.log('💡 Explanation: The Cross-Origin Resource Sharing (CORS) policy is enforced by the server to protect against unauthorized access from different domains. If you are the API owner, ensure proper CORS header configuration to permit access from your domain.');
  }
};

// 🔄 Process Data Function
const processData = (data, source) => {
  console.log('🔍 Sample Data:', data.slice(0, 5));
  console.log('📄 Full Data:', data);
  console.log('📍 Data Loaded from:', source);
};

// 🚀 Fetch and Cache Data on Script Load
fetchDataAndCache();