Has fetch() caught up with XMLHttpRequest in JavaScript?

Published on 10/10/2025
Updated on 27/10/2025

fetch() is the newer alternative to XMLHttpRequest (or XHR in short) with improved ergonomics, such as integration with promises / async / await and stream support. It was introduced in 2015. Despite that, many popular libraries still support XHR under the hood for AJAX requests. jQuery and Axios are some of them.

Where fetch() has caught up (or even surpassed XHR)

fetch() has come a long way since 2015. In most regards fetch() is very mature and can do many things that XMLHttpRequest can do or even exceed it. Including:

Timeout. It's possible with the help of AbortSignal: console.log("Aborting after 2s"); const res = await fetch('/api/test?responseSize=90000', { signal: AbortSignal.timeout(2000) }); console.log(await res.text());
Monitoring download progress. It can be done via ReadableStream: console.log("Starting request"); const res = await fetch('/api/test?responseSize=70000'); // we need a response of 70000 bytes const reader = res.body.getReader(); // reading the body as ReadableStream. // Note that it will not be possible to do res.text() // or something like that after getting ReadableStream. const total = Number(res.headers.get('content-length')) ?? 0; let loaded = new Uint8Array(); do { const { done, value } = await reader.read(); if (done) { break; } const merged = new Uint8Array(value.length + loaded.length); merged.set(loaded); merged.set(value, loaded.length); loaded = merged; if (total) { console.log(Math.round((loaded.length / total) * 100) + '%') } } while (true); console.log(new TextDecoder().decode(loaded));
Streaming uploads (Chromium based browsers only). fetch() can send a ReadableStream request body, while XHR can only send a whole Blob / FormData - no true streaming. Also, with ReadableStream it's kinda possible to estimate upload progress (count bytes enqueued, still not equivalent to the bytes successfully sent to the server and there is no easy way to send form data): let uploaded = 0 const buf = new Uint8Array(1024 * 50) const start = Date.now() var rs = new ReadableStream({ pull(ctrl) { uploaded += buf.byteLength; console.log('uploaded', uploaded); crypto.getRandomValues(buf); ctrl.enqueue(buf); if ((start + 1000) < Date.now()) { ctrl.close(); } } }) console.log("Starting request"); fetch('/api/test', { method: 'POST', body: rs, duplex: 'half', // This is needed for streamed uploads, // for Chromium based browsers only. }).then(r => r.text()).then(console.log);
keepalive option. keepalive option allows to reliably send a request even when the page is closed: console.log("Starting request"); const res = await fetch('/api/test?responseSize=20000', { keepalive: true }); console.log(await res.text()); XMLHttpRequest has no such thing.

Where fetch() hasn't caught up

Despite the last example, fetch() still doesn't truly support upload progress. XHR, on the other hand, supports both upload and download progress:

const xhr = new XMLHttpRequest();

xhr.upload.onprogress = (e) => {
	console.log(`${e.type}: ${e.loaded} bytes uploaded`);
}
xhr.onprogress = (e) => {
	console.log(`${e.type}: ${e.loaded} bytes downloaded`);
}

xhr.onload = () => {
	console.log("DONE", xhr.response);
};

const formData = new FormData();
formData.set("file", new Blob(["Some file content ".repeat(100000)], { type: 'text/plain' }));

console.log("Starting request");

xhr.open("POST", "/api/test?responseSize=50000");
xhr.send(formData);

Also, in addition to this, XHR supports synchronous requests. Although deprecated and discouraged to be used, it might have some use cases in specific situations.

These two reasons may explain why many popular libraries still lean more towards the old XHR.

Conclusion

fetch() is now very mature and provides most of the (or even surpassing in some regards, such as with streaming and keepalive) XMLHttpRequest functionality. However it doesn't support true upload progress and synchronous requests. While both (especially the last one) aren't the most used features, library makers usually want to cover all the use cases, which isn't surprising. So is a safer choice to keep the old XMLHttpRequest at least as a fallback. For most general use cases fetch() is a better choice due to its ergonomics, promise integration, stream and keepalive support.