LearnHub
Sign inCreate account

Project Challenge

Profile Loader Queue

Async HandlingAdvanced

Coordinate async profile requests so the UI can distinguish ready cards from failures without losing order.

Back to libraryOpen linked lesson

This Challenge

Category
Async Handling
Linked topic
Async Await
Estimated time
45 minutes
async/awaitBatch loadingPartial failure handling

Async Handling

Challenge brief

A team page loads several teammate cards at once and needs to keep successful cards in order while flagging failures clearly.

Target outcome

Build an async loader that resolves every profile, preserves display order, and reports failures without crashing the whole batch.

Deliverables
Resolve all profiles asynchronously in the original order.
Separate ready cards from failed requests.
Return a compact summary that the UI can render directly.
Avoid throwing away successful results when one profile fails.
Acceptance checklist
Ready cards stay in input order.
Failures are collected by id with a readable reason.
The summary exposes totalReady and totalFailed counts.
The function handles mixed success/failure batches gracefully.

Project Workspace

Build the challenge in one focused editor

Use the starter code, run the checks, and compare your structure with the solution notes only after you have attempted the project yourself.

Async Handling45 minAdvanced
Project editor

Build the challenge in JavaScript or TypeScript, then run the current workspace checks against the compiled output.

15 lines
JavaScript mode runs directly in the current project runner.
Workspace checks
Mixed success and failure
Check

Loader should keep working cards and surface failed ids cleanly.

Input: [[{"id":"u1","name":"Asha","role":"Frontend","shouldFail":false},{"id":"u2","name":"Ravi","role":"Backend","shouldFail":true,"reason":"Timeout"},{"id":"u3","name":"Mina","role":"QA","shouldFail":false}]]
Expected: {"totalReady":2,"totalFailed":1,"readyCards":[{"id":"u1","name":"Asha","role":"Frontend"},{"id":"u3","name":"Mina","role":"QA"}],"failures":[{"id":"u2","reason":"Timeout"}]}
Run output
Run the project to inspect automatic checks and console output.
Project review

Inspect the project solution like a senior reviewer would, with correctness, structure, and maintainability feedback.

Run the review after or before the code runner. If test results are available, the review will factor them into the feedback as well.