Conditional Data Fetching Based on Network Status

Develop a mechanism to fetch data from a local cache if the network is down and re-fetch from the server when the connection is back online.
function fetchData() {
  if (!navigator.onLine) {
    // Assume loadCacheData is a function that retrieves data from local cache
    return loadCacheData().then(data => {
      console.log('Loaded data from cache:', data);
      return data;
  // fetchDataFromServer is a function that performs a server fetch
  return fetchDataFromServer().then(data => {
    console.log('Fetched data from server:', data);
    return data;
This function checks the online status of the navigator. If offline, it retrieves data from the local cache; if online, it fetches data from the server.
window.addEventListener('online', function() {
  // Call fetchData when the network status changes to online to refresh data from server
  fetchData().then(data => {
    console.log('Network is back online, fetched latest data:', data);
An event listener is added to the window object that listens for the 'online' event, which triggers the `fetchData` function to refresh data from the server when network connection is restored.
window.addEventListener('offline', function() {
  console.log('Network offline, working from cache.');
An event listener is added for the 'offline' event to log when the network goes offline. It doesn't call `fetchData` since the function will be called automatically on any data request while offline.
function loadCacheData() {
  // This should be implemented to retrieve cached data
  // For this example, it returns a Promise resolving to mock data
  return Promise.resolve({ cached: 'data' });
Mock implementation of `loadCacheData` function. It should be replaced with the actual logic to retrieve cached data.
function fetchDataFromServer() {
  // This should be implemented to fetch data from the server
  // For this example, it uses fetch API to get data from a URL
  return fetch('').then(response => response.json());
Mock implementation of `fetchDataFromServer` function. It should be replaced with actual server-side fetching logic, in this case using the `fetch` API to retrieve data from an example API endpoint.