Feat(refactor): Migrate to Promises and declarative code for Concurrent Data Loading with Error Handling #14
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR completely refactors the application's data loading and rendering logic, moving away from verbose, imperative DOM manipulation toward a concise, high-performance, and declarative approach.
We replaced the sequential
async/awaitpattern and element-by-element DOM construction with a single, efficient promise chain usingPromise.all()andmap/join.Key Improvements
1. Performance and Concurrency
Promise.all()to fetch both the/reposand/membersendpoints simultaneously. The original method required waiting for the repositories to finish loading before starting the members fetch, resulting in unnecessary delays.document.createElementandappendChildoperations have been replaced by a single, fastinnerHTMLassignment. Array methods (map/join) build the entire HTML structure as a single string, drastically reducing rendering time.2. Code Minimalism and Readability
fetchDataarrow function to handle URL construction and JSON parsing, eliminating repeated code.$,x,reposUrl,membersUrl) and separate loading functions, executing the logic immediately within the promise chain.3. Reliability
.catch()and.finally()blocks to ensure robust error handling. The DOM is guaranteed to be updated (either with data or an error message), preventing silent failures and improving the user experience.