ggarnier

ggarnier

Modern Asynchronous JavaScript: displaying images as they're loaded (page 50)

In Aborting Multiple Fetch Requests with One Signal section, the code in abort/abort_ex09.js doesn’t show the downloaded images until Promise.all fulfills, which means you need to wait for all the image downloads before seeing them. Also, if you cancel after some downloads have finished, you won’t see those images.

I suggest a small change to make it display the images as the corresponding promise fulfills:

33c33,38
<   const tasks = urls.map(url => fetch(url, {signal: controller.signal}));
---
>   const tasks = urls.map(url => fetch(url, {signal: controller.signal}).then(async (r) => {
>     const img = document.createElement('img');
>     const blob = await r.blob();
>     img.src = URL.createObjectURL(blob);
>     gallery.appendChild(img);
>   }));
36,43c41,43
<     const response = await Promise.all(tasks);
<     response.forEach(async (r) => {
<       const img = document.createElement('img');
<       const blob = await r.blob();
<       img.src = URL.createObjectURL(blob);
<       gallery.appendChild(img);
<     });
<     result.textContent = '';
---
>     Promise.all(tasks).then(() => {
>       result.textContent = '';
>     });

Marked As Solved

Faraz

Faraz

Author of Modern Asynchronous JavaScript

Oh, my bad! :grinning: Thanks for clarifying that. We’re updating the code in the next version of the book.

Where Next?

Popular Community topics Top

Rainer
My first contact with Erlang was about 2 years ago when I used RabbitMQ, which is written in Erlang, for my job. This made me curious and...
New
Tommy
So I have enough money to last a year. Realistically I’m still going to have to work part time painting. I’m so done with it though! I h...
New
mafinar
Crystal recently reached version 1. I had been following it for awhile but never got to really learn it. Most languages I picked up out o...
New
mafinar
I am going to dump my thoughts, methods, codes, experiences and rants while learning OCaml into this thread. This is probably the 5th or...
New
RobertKielty
My overall initial first impressions of this book are very good. I will document my local spacemacs setup to as I work through the book.
New
TwistingTwists
I have read first chapter. Will add my notes / code tries / self exploration as I go along! Thank you @AstonJ for encouraging to start ...
New
ohm
I would love to begin a book club with Mike Amundsen’s (@mamund) book Design and Build Great Web APIs. It seems that building new syste...
New
adamaiken89
Anyone is interested in a classical textbook for algorithms can go and check that.
New
PragmaticBookshelf
When the pandemic, heart disease, and personal tragedy threatened to steal everything the Tates spent years building, they found hope, he...
New
TomMahon
How did a sleepy valley become the epicenter of the technological world as we know it? In the 40th Anniversary Edition of my book, “Charg...
New

Other popular topics Top

Exadra37
I am thinking in building or buy a desktop computer for programing, both professionally and on my free time, and my choice of OS is Linux...
New
AstonJ
You might be thinking we should just ask who’s not using VSCode :joy: however there are some new additions in the space that might give V...
New
PragmaticBookshelf
From finance to artificial intelligence, genetic algorithms are a powerful tool with a wide array of applications. But you don't need an ...
New
AstonJ
I ended up cancelling my Moonlander order as I think it’s just going to be a bit too bulky for me. I think the Planck and the Preonic (o...
New
PragmaticBookshelf
Use WebRTC to build web applications that stream media and data in real time directly from one user to another, all in the browser. ...
New
Maartz
Hi folks, I don’t know if I saw this here but, here’s a new programming language, called Roc Reminds me a bit of Elm and thus Haskell. ...
New
AstonJ
If you want a quick and easy way to block any website on your Mac using Little Snitch simply… File &gt; New Rule: And select Deny, O...
New
New
husaindevelop
Inside our android webview app, we are trying to paste the copied content from another app eg (notes) using navigator.clipboard.readtext ...
New
PragmaticBookshelf
Author Spotlight: VM Brasseur @vmbrasseur We have a treat for you today! We turn the spotlight onto Open Source as we sit down with V...
New