Market Data and API Integration
15 min read
Add API Fallback and Status
Add API Fallback and Status
External requests can fail, so the final project explicitly changes its status message instead of leaving the UI in a loading state forever.
Extend the previous request with a catch handler:
.catch(() => {
live = false;
$("connectionText").textContent = "Demo rates";
$("connectionSub").textContent = "Live service unavailable";
$("rateStatus").textContent = "Fallback rates";
$("connectionDot").style.background = "#c9a34b";
update();
renderRates();
});
You can temporarily replace the URL with an invalid address to exercise the failure branch, then restore the project endpoint.
Test it
Force a request failure during development and confirm the app still calculates conversions.
Checkpoint
The user can tell whether the app is using live data or fallback data, and the converter remains usable in both cases.