8 Tricks When Using the Fetch() API

In this Hasty Treat, Scott and Wes talk about 8 tricks to try when using the Fetch() API.

Show Notes

• 00:23 Welcome
• 02:14 1) Stream The Result

// Create a new TextDecoder instance
const decoder = new TextDecoder();

// Make the fetch request
fetch('https://api.example.com/streaming-data')
  .then(response => {
    // Check if the response is valid
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }

    // Stream the response data using a TextDecoder
    const reader = response.body.getReader();

    // Function to read the streamed chunks
    function read() {
      return reader.read().then(({ done, value }) => {
        // Check if the streaming is complete
        if (done) {
          console.log('Streaming complete');
          return;
        }

        // Decode and process the streamed data
        const decodedData = decoder.decode(value, { stream: true });
        console.log(decodedData);

        // Continue reading the next chunk
        return read();
      });
    }

    // Start reading the chunks
    return read();
  })
  .catch(error => {
    // Handle errors
    console.log('Error:', error);
  });

• 06:05 2) Download Progress
• Download progress example
• 09:40 3) Cancel Streams - Abort Controller

// Create an AbortController instance
const controller = new AbortController();

// Set a timeout to abort the request after 5 seconds
const timeout = setTimeout(() => {
controller.abort();
}, 5000);

// Fetch request with the AbortController
fetch('https://api.example.com/data', { signal: controller.signal })

• 11:32 4) Testing if JSON is returned
• 13:18 5) async + await + catch

const data = await fetch().catch(err => console.log(err));

• 14:42 6) to awaited - return error and data at top level

const [err, data] = collect(fetch())
if(err) // ....

• await-to-js - npm
• 16:58 7) Dev tools - Copy as fetch
• 17:54 8) You can programatically create a Request, Response and Headers objects

const myRequest = new Request('https://traffic.libsyn.com/syntax/Syntax_-_641.mp3', {
   headers: {
      'Content-Type': 'text/plain',
   }
});

fetch(myRequest)

Tweet us your tasty treats

• Scott's Instagram
• LevelUpTutorials Instagram
• Wes' Instagram
• Wes' Twitter
• Wes' Facebook
• Scott's Twitter
• Make sure to include @SyntaxFM in your tweets
• Wes Bos on Bluesky
• Scott on Bluesky
• Syntax on Bluesky