Skip to main content
656

August 21st, 2023 × #javascript#webdev#fetch

8 Tricks When Using the Fetch() API

Wes shares 8 tricks for using the JavaScript Fetch API including streaming responses, tracking download progress, and handling errors.

or

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

Share