Sling Academy
Home/JavaScript/Combine fetch with Other Web APIs in JavaScript

Combine fetch with Other Web APIs in JavaScript

Last updated: December 12, 2024

JavaScript, the cornerstone of web development, continuously offers new ways to enhance the user experience by integrating with various Web APIs. Among its vast tooling, fetch is a powerful API for making network requests, a common necessity in web applications. But beyond its primary use of retrieving data, fetch can be seamlessly combined with other Web APIs to create more interactive and dynamic web applications.

What is the Fetch API?

The Fetch API provides a modern, promise-based approach to handle network requests, fundamentally for fetching resources like data across the network. Before diving into its integration with other APIs, let's quickly review the basic usage of fetch.

// Basic example of Fetch API
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

The snippet above demonstrates the use of fetch to retrieve JSON data from an external API. But what if we want to do more with this data, such as cache it, validate user input before requesting it, or even sync data offline?

Integrating Fetch with the Cache API

One useful combination is fetch with the Cache API. The Cache API can store network responses for specific requests, providing real-time or offline access without extra network calls. Here's how we can extend our fetch example:

// Checking cache before making a fetch request
if ('caches' in window) {
  caches.open('my-cache').then(cache => {
    cache.match('https://api.example.com/data').then(response => {
      if (response) {
        // Serve the cached response if available
        return response.json().then(data => console.log('Cached Data:', data));
      } else {
        // Otherwise, fall back to the network fetch
        return fetch('https://api.example.com/data').then(fetchResponse => {
          cache.put('https://api.example.com/data', fetchResponse.clone());
          return fetchResponse.json().then(data => console.log('Fetched Data:', data));
        });
      }
    });
  });
}

Combining Fetch with Service Workers

Service Workers are another powerful API to couple with fetch. Service Workers intercept network requests to cache resources efficiently, enabling robust offline capabilities or faster load times.

// Example setup of a Service Worker using Fetch 
self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(cachedResponse => {
      // Serve cached response if available, otherwise fetch from network
      return cachedResponse || fetch(event.request).then(networkResponse => {
        return caches.open('my-cache').then(cache => {
          cache.put(event.request, networkResponse.clone());
          return networkResponse;
        });
      });
    })
  );
});

Utilizing the Web Storage API

Sometimes, fetching small but critical data regularly is not necessary. Integration with the Web Storage API, including localStorage or sessionStorage, offers a simple way to store lightweight data. Here’s how to store data from a fetch request:

// Using fetch with localStorage
fetch('https://api.example.com/userinfo')
  .then(response => response.json())
  .then(data => {
    localStorage.setItem('userInfo', JSON.stringify(data));
    console.log('User Info has been saved!');
  })
  .catch(error => console.error('Error:', error));

Integrating Fetch with the WebSocket API

In highly interactive applications where live updates are needed, integrating fetch with WebSockets can deliver outstanding results. WebSockets provide a full-duplex communication channel, perfect for notifications, live messages, etc.

// Combine Fetch with Websockets
const socket = new WebSocket('wss://example.com/socket');

socket.onmessage = (event) => {
  console.log('New message from server:', event.data);
  // Fetch updated data in response to messages, if needed
  fetch('https://api.example.com/data/updates')
    .then(response => response.json())
    .then(updateData => console.log('Updated Data:', updateData));
};

Combining fetch with other Web APIs unlocks endless possibilities. Whether it is caching responses for offline use, augmenting real-time capabilities with WebSockets, or storing small amounts of data with Web Storage, JavaScript provides the flexibility to create fully integrated and interactive web experiences.

Next Article: Optimize Network Calls Using the JavaScript fetch API

Previous Article: Use async/await with the JavaScript fetch API

Series: Web APIs – JavaScript Tutorials

JavaScript

You May Also Like

  • Handle Zoom and Scroll with the Visual Viewport API in JavaScript
  • Improve Security Posture Using JavaScript Trusted Types
  • Allow Seamless Device Switching Using JavaScript Remote Playback
  • Update Content Proactively with the JavaScript Push API
  • Simplify Tooltip and Dropdown Creation via JavaScript Popover API
  • Improve User Experience Through Performance Metrics in JavaScript
  • Coordinate Workers Using Channel Messaging in JavaScript
  • Exchange Data Between Iframes Using Channel Messaging in JavaScript
  • Manipulating Time Zones in JavaScript Without Libraries
  • Solving Simple Algebraic Equations Using JavaScript Math Functions
  • Emulating Traditional OOP Constructs with JavaScript Classes
  • Smoothing Out User Flows: Focus Management Techniques in JavaScript
  • Creating Dynamic Timers and Counters with JavaScript
  • Implement Old-School Data Fetching Using JavaScript XMLHttpRequest
  • Load Dynamic Content Without Reloading via XMLHttpRequest in JavaScript
  • Manage Error Handling and Timeouts Using XMLHttpRequest in JavaScript
  • Handle XML and JSON Responses via JavaScript XMLHttpRequest
  • Make AJAX Requests with XMLHttpRequest in JavaScript
  • Customize Subtitle Styling Using JavaScript WebVTT Integration