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

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
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
mafinar
TL;DR I am reading “Domain Modeling Made Functional” and discussing and keeping a journal of what I learned from it, any co-readers welco...
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
RomanTurner
Agile Web Development with Rails 6 Chapter 11. Task F Currently reading and working through AWDR6 by Sam Ruby, David Bryant Copeland, a...
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
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
alvinkatojr
https://fs.blog/mental-models/ I’ve been reading Farnham Street for a while, and this topic is the recommended starting point for new re...
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’...
1063 24245 395
New
New
AstonJ
Just done a fresh install of macOS Big Sur and on installing Erlang I am getting: asdf install erlang 23.1.2 Configure failed. checking ...
New
PragmaticBookshelf
Create efficient, elegant software tests in pytest, Python's most powerful testing framework. Brian Okken @brianokken Edited by Kat...
New
PragmaticBookshelf
Author Spotlight Rebecca Skinner @RebeccaSkinner Welcome to our latest author spotlight, where we sit down with Rebecca Skinner, auth...
New
AstonJ
If you’re getting errors like this: psql: error: connection to server on socket “/tmp/.s.PGSQL.5432” failed: No such file or directory ...
New
AnfaengerAlex
Hello, I’m a beginner in Android development and I’m facing an issue with my project setup. In my build.gradle.kts file, I have the foll...
New
PragmaticBookshelf
A masterclass in the fundamentals and principles of functional programming. Minh Quang Tran The Art of Functional Programming is a ma...
New
PragmaticBookshelf
Overarching tutorial for Python beginner and intermediate developers that teaches web development with the Flask framework. Miguel Gr...
New
mindriot
Ok, well here are some thoughts and opinions on some of the ergonomic keyboards I have, I guess like mini review of each that I use enoug...
New