Playing: 656: 8 Tricks When Using the Fetch() API
0:00
LOUDNESS
Episode 574
|Feb 10th, 2023
Supper Club Γ Qwik framework from MiΕ‘ko Hevery, the Creator of Angular
Episode 393
|Oct 4th, 2021
Hasty Treat - Spicy Takeout - PHP Is Good and Weβre Just Re-Creating It
Aug 21st, 2023
8 Tricks When Using the Fetch() API
π Download ShowβοΈ Edit Show NotesIn 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);
});- 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 })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)Tweet us your tasty treats
- Scott's Instagram
- LevelUpTutorials Instagram
- Wes' Instagram
- Wes' Twitter
- Wes' Facebook
- Scott's Twitter
- Make sure to include @SyntaxFM in your tweets
- Wes Bos on Bluesky
- Scott on Bluesky
- Syntax on Bluesky