DEV Community

Cover image for 🚀How to fetch API in Proper way & Add additional features 🌟
Bhavyashah
Bhavyashah

Posted on

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

🚀 Many individuals are facing the challenge of optimizing API calls to reduce their frequency. They may be unsure of the proper approach for fetching APIs and minimizing the number of calls, while incorporating additional features during data retrieval.

Outlined below is a code snippet that illustrates the appropriate and efficient way to achieve this:

// 🌐 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();
Enter fullscreen mode Exit fullscreen mode

Here is the Output of the code:

Image description

Image description

👍 If you find this content helpful, we encourage you to like and share it with your friends, so they can also benefit from these API fetching techniques.

Furthermore, should you require web development services, feel free to consider my expertise. You can connect with me on LinkedIn and explore my Upwork and Dev.to profiles:

Upwork Profile: Upwork Profile

LinkedIn Profile: Linkedin Profile

Dev.to Profile: Dev.to Profile

Thank you for your time and consideration. Should you have any inquiries or require further assistance, please do not hesitate to reach out. 🙏

Top comments (0)