Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

8 Tricks When Using the Fetch() API

Syntax - Tasty Web Development Treats

Full Stack Developers Wes Bos and Scott Tolinski dive deep into web development topics, explaining how they work and talking about their own experiences. They cover from JavaScript frameworks like React, to the latest advancements in CSS to simplifying web tooling.

In this Hasty Treat, Scott and Wes talk about 8 tricks to try when using the Fetch() API. <h2 class="code-line" data-line-start="2" data-line-end="3"><a id= "Show_Notes_2"></a>Show Notes</h2> <ul> <li class="has-line-data" data-line-start="4" data-line-end="5"> <a href="#t=00:23">00:23</a> Welcome</li> <li class="has-line-data" data-line-start="5" data-line-end="7"> <a href="#t=02:14">02:14</a> 1) Stream The Result</li> </ul> <pre><code class="has-line-data" data-line-start="8" data-line-end= "48">// 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); }); </code></pre> <ul> <li class="has-line-data" data-line-start="49" data-line-end="50"> <a href="#t=06:05">06:05</a> 2) Download Progress</li> <li class="has-line-data" data-line-start="50" data-line-end="51"> <a href= "https://twitter.com/wesbos/status/1688914467864903684">Download progress example</a></li> <li class="has-line-data" data-line-start="51" data-line-end="53"> <a href="#t=09:40">09:40</a> 3) Cancel Streams - Abort Controller</li> </ul> <pre><code class="has-line-data" data-line-start="54" data-line-end="65">// 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 }) </code></pre> <ul> <li class="has-line-data" data-line-start="66" data-line-end="67"> <a href="#t=11:32">11:32</a> 4) Testing if JSON is returned</li> <li class="has-line-data" data-line-start="67" data-line-end="69"> <a href="#t=13:18">13:18</a> 5) async + await + catch</li> </ul> <code>const data = await fetch().catch(err => console.log(err));</code> <ul> <li class="has-line-data" data-line-start="71" data-line-end="73"> <a href="#t=14:42">14:42</a> 6) to awaited - return error and data at top level</li> </ul> <pre><code class="has-line-data" data-line-start="74" data-line-end="77">const [err, data] = collect(fetch()) if(err) // .... </code></pre> <ul> <li class="has-line-data" data-line-start="78" data-line-end="79"> <a href="https://www.npmjs.com/package/await-to-js">await-to-js - npm</a></li> <li class="has-line-data" data-line-start="79" data-line-end="80"> <a href="#t=16:58">16:58</a> 7) Dev tools - Copy as fetch</li> <li class="has-line-data" data-line-start="80" data-line-end="82"> <a href="#t=17:54">17:54</a> 8) You can programatically create a Request, Response and Headers objects</li> </ul> <pre><code class="has-line-data" data-line-start="83" data-line-end="91">const myRequest = new Request('https://traffic.libsyn.com/syntax/Syntax_-_641.mp3', { headers: { 'Content-Type': 'text/plain', } }); fetch(myRequest) </code></pre>

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)

Aplikace Youradio Talk

8 Tricks When Using the Fetch() API

Poslechněte si podcast