8 Tricks When Using the Fetch() API
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)
Episode page ↗
