Skip to content

refactor: use the fetch API #33

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Oct 15, 2024
Merged

refactor: use the fetch API #33

Changes from 5 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
dd23663
refactor: swap out xmlhttprequest for fetch
lishaduck Sep 23, 2024
7cf17be
perf: drop unnecessary async modifier
lishaduck Sep 23, 2024
4eb4c19
refactor: use async-await to load the data
lishaduck Sep 23, 2024
a7eb02c
style: remove random spaces
lishaduck Sep 23, 2024
a05191b
refactor: don't use nested functions
lishaduck Sep 23, 2024
302174e
fix: use strict mode, not sloppy mode
lishaduck Oct 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
64 changes: 30 additions & 34 deletions __brick__/web/flutter_bootstrap.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,48 +31,44 @@ async function beginPreloading() {
progressIndicator.style.width = '0%';
progressText.textContent = `Loaded ${loadedAssets} of ${totalAssets} assets`;

async function reportProgress() {
loadedAssets++;

const value = Math.floor((loadedAssets / totalAssets) * 100) + '%';
progressIndicator.style.width = value;

progressText.textContent = `Loaded ${loadedAssets} of ${totalAssets} assets`;
for (let i = 0; i < assets.length; i += batchSize) {
const batch = assets.slice(i, i + batchSize);
await loadBatch(batch);
}
}

async function load(url) {
return new Promise((resolve, reject) => {
const req = new XMLHttpRequest();

req.onload = function() {
if (req.status >= 200 && req.status < 300) {
resolve(req.response);
} else {
reject(new Error(`Failed to load: ${req.status} ${req.statusText}`));
}
};
function reportProgress() {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is out of the scope for the refactor but I wonder if we should write some tests for this loader to just verify it works as intended

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

cc: @alestiago @tomarra

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, the initial effort didn't have any tests. I would very much like to have some tests on the template output that verify the loading behavior is as expected; although it might be a bit complex to assess such.

loadedAssets++;

req.onerror = function() {
reject(new Error('Network error'));
};
const value = Math.floor((loadedAssets / totalAssets) * 100) + '%';
progressIndicator.style.width = value;

req.open('GET', url);
req.send();
});
}
progressText.textContent = `Loaded ${loadedAssets} of ${totalAssets} assets`;
}

async function loadBatch(urls) {
const loadPromises = urls.map(url => load(url).then(reportProgress()));
try {
return await Promise.all(loadPromises);
} catch (error) {
console.error('Error loading one or more asset:', error);
async function load(url) {
try {
const response = await fetch(url);
if (!response.ok) {
throw new Error(
`Failed to load: ${response.status} ${response.statusText}`,
);
}
return await response.text();
} catch (error) {
throw new Error("Network error");
}
}

for (let i = 0; i < assets.length; i += batchSize) {
const batch = assets.slice(i, i + batchSize);
await loadBatch(batch);
async function loadBatch(urls) {
const loadPromises = urls.map(async (url) => {
await load(url);
reportProgress();
});
try {
return await Promise.all(loadPromises);
} catch (error) {
console.error('Error loading one or more asset:', error);
}
}

Expand Down