59 min listen
8 Tricks When Using the Fetch() API
8 Tricks When Using the Fetch() API
ratings:
Length:
20 minutes
Released:
Aug 21, 2023
Format:
Podcast episode
Description
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)
Released:
Aug 21, 2023
Format:
Podcast episode
Titles in the series (100)
Dang, that's handy! JavaScript Utility Libraries ?️: Scott and talk all about different JavaScript utility libraries that make you say "Dang, that's handy!" Sponsor - Get 30 days free. Make sure to enter SYNTAX into the "How did you hear about us" section. Show Notes You should... by Syntax - Tasty Web Development Treats