CodingNic

Market Data and API Integration

Add API Fallback and Status

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:

javascript
.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.