I recently faced a full-stack interview, and one question really tested my understanding of asynchronous JavaScript ⏱️ 💡 Scenario: You’re given multiple API calls that fetch data from different sources. The task: combine the results and display them in a specific order, but some APIs are slower than others. The interviewer asked: “How would you ensure all data is fetched efficiently, without blocking the UI, and handle errors gracefully?” 🧠 What they were really testing: Understanding of Promises, async/await, and error handling Ability to parallelize requests for performance Clean and readable asynchronous code Problem-solving mindset for real-world apps 💡 Tip: Interviews on asynchronous JS aren’t about memorizing syntax. They’re about thinking how data flows, how to handle failures, and keeping the UI responsive 🚀 #JavaScript #AsyncJS #FullStackInterview #CodingInterview #WebDevelopment #FrontendDeveloper #MERNStack #ProblemSolving
I would trigger all API calls simultaneously, rather than waiting for one to finish before starting the next. Use Promise.all() or Promise.allSettled() If all data is mandatory → use Promise. all If partial data is acceptable → use Promise.allSettled In the case of React.js 1)useEffect for side effects 2)useState for data, loading, and error 3)Promise.allSettled for graceful error handling 4)Parallel API calls (non-blocking UI)
Fetch all Api’s in parallel using the Promise.allSettled, then we can use the index mapping and render each section independently with loading, success or error states. Abort the request on unmount and apply retries or timeouts. In short Tanstack query provides all these features 🙂↕️
If react js: Concurrent fetching: useQueries runs all APIs in parallel Non-blocking UI: Each query tracks its own isLoading state so you can show a loading indicator right away Graceful error handling: isError or result.error lets you handle partial failures without breaking the app Ordered results: combinedData keeps the results in the order of your original API list Bonus: Automatic retries, caching, and background refetching, things you’d otherwise have to set up manually
There are multiple solutions for this problem, One is just fetch all APIs at once and show loader on the screen. Create a global variable and function that keeps track about all fetch returns and can show error if something went wrong or any fetch error. This function need to be called in all possible situations in a fetch like when API sent a result back, Inside catch or throw.
Async interviews are less about syntax and more about control — parallel where possible, sequence where needed, and always fail gracefully. Clean async flow = better performance + better user experience.
Event loop and actual working of async task is the fav interview's place to play with employees
React Query is the best option for this. It’s commonly used in big projects 😍. With a single query hook you can call multiple services.
Smart question , looks like for seniors developer
I believe forkJoin + mergeMap provided by RxJs would be the best option here.
If all data is needed at the same time to render the UI I will fetch all APIs in parallel using Promise.all or Promise.allSettled to avoid blocking. This ensures maximum performance, predictable ordering, and clean error handling, while keeping the UI responsive with loaders. But if all data is NOT needed at the same time I will simulate lazy loading and load critical data first then lazy-load non-critical data after the initial render or on user interaction. This improves perceived performance and prevents slow APIs from blocking the UI.