1. How would you load videos and likes so videos still render when the likes request fails?
Two browser API functions are available: getVideos() and getVideosLikes(), and either promise may reject. Videos are critical, while likes are optional. Define the client-facing orchestration and returned data contract, including the key used to associate likes with videos, what the caller receives when both operations succeed, what error is exposed when getVideos() fails, and how every available video is still returned with a null or 0 likes value when getVideosLikes() fails. The contract must let the UI distinguish complete data from this permitted degraded result without converting the optional failure into total failure.
I would start both browser calls in parallel when the page loads. getVideos() is critical, while getVideosLikes() is optional. I would use AbortController and a stale-request guard so obsolete work cannot update the page. After each response, I would check the status, content type, JSON parsing, and expected data shape. Likes are associated with videos by videoId. If both calls succeed, the result is complete. If likes fail, every available video still returns, with its likes value represented as 0 or null, and the result is degraded. If videos fail, I expose the final video error. HTTPS, same-origin rules, and CORS remain part of the browser security boundary.
The main goal is simple. Videos must appear even when likes cannot load. When the page opens, the browser starts both requests together. The video request is required. The likes request is optional. The browser checks each response before using it. Likes are matched to videos using videoId. If likes fail, every available video still appears. Its missing likes value becomes 0 or null. The returned status tells the caller whether the data is complete or degraded. Only a video failure becomes the final page error.
- What exact JSON shape does getVideos() return?
- Does getVideosLikes() return a map keyed by videoId?
- Should missing likes use 0 or null in this product?
- Should a degraded likes result show a non-blocking message?
- Should navigation cancel both in-flight requests?
- Are these calls same-origin or cross-origin in the browser?
A page or lifecycle event starts the flow. The browser calls getVideos() and getVideosLikes() using HTTPS GET requests.
getVideos() returns the video list. Each video includes an identifier and the video fields expected by the UI.
getVideosLikes() returns a likes map. The association key is videoId. That key connects each like count to the correct video.
The caller receives videos, likes, status, and error. The status is complete or degraded for successful video results.
When both calls succeed, status is complete. The likes map contains the real count for each videoId.
When the likes call fails, status is degraded. Every available video is still returned. The likes value for each returned video is represented as 0 or null, following the chosen contract.
When getVideos() fails, the critical data is unavailable. The caller receives the final video error, and the normal video list is not rendered.
The browser first enters the loading state.
It then starts getVideos() and getVideosLikes() in parallel. This avoids waiting for the optional request before starting the critical one.
The client creates an AbortController. Its signal can be used by both requests. This lets obsolete work be canceled after navigation or cleanup.
The client also keeps a stale-request guard. For example, it can compare a request identifier with the current request. If an older response arrives later, the client ignores it.
This prevents stale data from replacing newer UI state.
The browser does not trust a response immediately.
It first checks the HTTP response status. A normal HTTP error response does not automatically make fetch reject, so the client must inspect the response before using its body.
Next, it checks the expected JSON content type. Then it parses the JSON.
After parsing, it checks the runtime shape. The video response must contain usable video data. The likes response must contain the expected videoId to like-count mapping.
Only validated data moves into the client processing step.
There are three important UI outcomes.
If both requests succeed, the client maps likes by videoId. It returns the videos with their matching like counts and marks the result complete.
If getVideosLikes() fails, the client treats that as an optional failure. It does not convert the whole operation into a final error. It returns every available video, represents missing likes as 0 or null, and marks the result degraded. The UI may show a non-blocking notice.
If getVideos() fails, the critical content is missing. The client enters the final error state and shows the error or empty error view.
These outcomes remain separate. A likes failure never becomes the same state as a videos failure.
The remote API stays outside the JavaScript application boundary.
Requests use HTTPS. The browser also applies its same-origin and CORS rules. CORS controls whether browser JavaScript may read an allowed cross-origin response. It is not authentication.
Cookies or tokens, when used by the existing browser contract, remain part of the browser security boundary. The frontend must not contain private server secrets.
The browser owns loading state, cancellation, stale-response protection, validation, merging, and rendering. The remote API remains one external boundary.
I would test the three main outcomes separately.
First, make both operations succeed. Confirm that each videoId receives the correct like count and that status is complete.
Second, make only getVideosLikes() fail. Confirm that every available video still appears. Confirm that its likes value is represented as 0 or null, and that status is degraded.
Third, make getVideos() fail. Confirm that the client exposes the final video error and does not render the normal video list.
I would also test invalid JSON, an unexpected response shape, cancellation, and an older response arriving after a newer request. These checks prove that invalid or stale data cannot incorrectly update the UI.
The browser makes two network requests and starts them together. This keeps the optional likes request from delaying the start of the video request. After both outcomes are known, the client can build a lookup from videoId to like count and walk through the videos once. For V videos and L like records, the client work is about O(V + L), with about O(L) extra memory for the lookup. The main trade-off is more client state. The browser must distinguish complete, degraded, final-error, aborted, and stale outcomes. AbortController can stop obsolete work, while the stale-request guard prevents old responses from changing newer UI state. Response validation adds code, but it prevents malformed data from reaching the UI. HTTPS, same-origin rules, and CORS remain at the browser-to-remote-API boundary.
The interviewer is checking whether I can separate critical data from optional data. They want a clear client-facing contract, correct Promise and HTTP behavior, and safe failure handling. They also want to see whether I validate remote data before rendering it. Good answers show an understanding of cancellation, stale responses, browser security boundaries, and graceful degradation. The main judgment is knowing when one failed request should reduce the experience instead of failing the whole page.

