Exploring the benefits of streaming data and how it can be applied in scenarios like downloading large files, generating progress indicators, and the ability to clone web streams for viewing progress without affecting the original data.
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)