A Tasty Treats Podcast for Web Developers.

Ask a Potluck Question →
Wes Bos

Wes Bos

Full Stack JavaScript Developer. Creator of really good web development courses. BBQ enthusiast.

Scott Tolinski

Scott Tolinski

Web Developer, Creator of Level Up Tuts, Bboy, Robotops Crew and Youtuber

Playing: 656: 8 Tricks When Using the Fetch() API

0:00

LOUDNESS

Aug 21st, 2023

8 Tricks When Using the Fetch() API

👇 Download Show✏️ Edit Show Notes

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

Show Notes

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

fetch(myRequest)

Tweet us your tasty treats