I came up with this blog post while unwrapping a piece of candy. One was salty, one was sweet, and both had different wrappers. It hit me—this is exactly how HTTP requests in JavaScript have evolved over time.
If you're just getting started with JavaScript and already using the modern fetch() or axios, you might not know that under the hood, these tools are wrapping something older. Here's how my candy analogy applies:
🍬 Old-School XMLHttpRequest (XHR)
Like a candy wrapped in plain, hard-to-open paper. Once you bite into it—boom, 50% salty, 50% sweet.
You really have to chew through the rough parts:
- Manually handling
readyStateandstatus - Callback hell
- Verbose, hard-to-maintain code
Sure, it works, but it's not a fun experience. It gets the job done, but leaves a bad taste for many devs.
🍬 Modern fetch()
Now this is a shiny, easy-to-open wrapper with a sweeter experience.
- Built into modern browsers
- Uses Promises, making the syntax cleaner and easier to read
- Automatically parses JSON with
.json()
Still, behind the scenes, it’s using lower-level features similar to XHR, but way more polished. Think: 90% sweet, 10% salty. Developers love it because it’s simple and effective.
🍬 Axios
Imagine the deluxe, imported version of that candy 😄.
Axios is a third-party library that wraps around XHR (not fetch) and gives you a top-tier experience:
- Automatically converts response to JSON
- Supports timeouts out of the box
- Lets you use interceptors to manipulate requests/responses
- Has better built-in error handling
It’s even less salty and super creamy—perfect for picky or advanced developers working on bigger apps.
🍬 What About React, Vue, and Angular?
Modern frameworks don’t re-invent the wheel when it comes to HTTP requests:
- React & Vue devs commonly use fetch() or axios
- Angular has a built-in HttpClient, but it still does the same job: talking to APIs
➕ Addition: jQuery’s $.ajax() or $.get()
If you’ve worked on legacy codebases, you might see these. jQuery came before fetch and Axios were popular and made XHR easier back then.
They also wrap XHR under the hood, but today, most new projects prefer fetch or axios for cleaner, modern development.
🍬 Final Thoughts
No matter which wrapper you choose, you're still biting into the same core candy: communicating with an API via HTTP.
-
XMLHttpRequest– The old school way (salty AF 🧂) -
fetch()– The modern native way (easy and sweet 🍯) -
axios– The premium candy experience (dev favorite 🍫)
Even though you may not be dealing with XHR directly anymore, understanding where all these methods came from will help you appreciate the tools you’re using—and debug like a pro when needed.
If you found this helpful, consider supporting my work at ☕ Buy Me a Coffee.
Top comments (0)