8 Tricks When Using the Fetch() API - a podcast by Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

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) 

Further episodes of Syntax - Tasty Web Development Treats

Further podcasts by Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Website of Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers