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

finner
As one of my New Year resolutions is to read more tech I’ve decided on an attempt to document my travels in Mannings Modern Java in Actio...
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
rustkas
To be a more productive reader when rereading a book, it is very convenient to create small rebar3 projects based on books’ samples and i...
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
ggarnier
In Aborting Multiple Fetch Requests with One Signal section, the code in abort/abort_ex09.js doesn’t show the downloaded images until Pro...
New
rgerardi
Hello all. Creating this space here for general discussion and chat about Powerful Command-Line Applications In Go In particular, we ca...
New
adamaiken89
Anyone is interested in a classical textbook for algorithms can go and check that.
New
AstonJ
With Tailwind now the default CSS framework shipped with Phoenix we thought it would be nice to run this book club on the Elixir Forum. ...
New

Other popular topics Top

Devtalk
Reading something? Working on something? Planning something? Changing jobs even!? If you’re up for sharing, please let us know what you’...
1052 21915 398
New
New
PragmaticBookshelf
Machine learning can be intimidating, with its reliance on math and algorithms that most programmers don't encounter in their regular wor...
New
brentjanderson
Bought the Moonlander mechanical keyboard. Cherry Brown MX switches. Arms and wrists have been hurting enough that it’s time I did someth...
New
PragmaticBookshelf
Learn different ways of writing concurrent code in Elixir and increase your application's performance, without sacrificing scalability or...
New
PragmaticBookshelf
Rails 7 completely redefines what it means to produce fantastic user experiences and provides a way to achieve all the benefits of single...
New
AstonJ
Was just curious to see if any were around, found this one: I got 51/100: Not sure if it was meant to buy I am sure at times the b...
New
New
CommunityNews
A Brief Review of the Minisforum V3 AMD Tablet. Update: I have created an awesome-minisforum-v3 GitHub repository to list information fo...
New
RobertRichards
Hair Salon Games for Girls Fun Girls Hair Saloon game is mainly developed for kids. This game allows users to select virtual avatars to ...
New