Await StationISSUE #13 of 26

xhr · the legacy XMLHttpRequest

PromissaVSRace Condition Rex

Promissa saysXMLHttpRequest is the legacy request API fetch replaced — you’ll still meet it in old code.

Before fetch, XMLHttpRequest (XHR) made requests via an event-based API: open, set onload/onerror, then send. It's verbose and callback-driven. You rarely write new XHR, but you'll read it in legacy code, and it still has one edge: native upload progress events, which fetch lacked for a long time.

Power-ups you unlock

XHR: open() → onload/onerror → send()
Event-based, verbose, callback-driven
fetch replaced it for new code
XHR still has native upload progress events

Race Condition Rex attacks — common mistakes

Writing new XHR instead of fetch
Forgetting XHR is async by default
Missing error/abort event handlers

Boss battleRecognize the XHR shape and map it mentally to the equivalent fetch.

Example code

<!doctype html><html><head><meta charset="utf-8"></head>
<body style="background:#06040d;color:#e6e0ff;font-family:monospace;padding:20px"><pre>const xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.onload = () => console.log(xhr.responseText);
xhr.onerror = () => console.error('failed');
xhr.send();
// modern: await (await fetch(url)).text()</pre></body></html>

▶ Open the interactive comic issue

‹ Abort Controller · Cancelable Requests Websockets · Client Api ›