#107 Difference between fetch() vs axios()? Why we use axios instead of fetch?

Difference between fetch() and axios() in JavaScript:

---

🔹 1. Basic Definition:

• fetch() is a built-in browser API for making HTTP requests.
• axios() is a third-party library (needs installation) built on top of XMLHttpRequest.

---

🔸 2. Syntax & Simplicity:

• axios is generally easier to use, especially for common tasks like sending JSON or handling timeouts.

Fetch:

fetch('/api', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify(data),
})
  .then(res => res.json())
  .then(data => console.log(data))

Axios:

axios.post('/api', data)
  .then(res => console.log(res.data));

---

🔸 3. Automatic JSON Conversion:

• fetch() needs manual .json() conversion
• axios() auto-parses JSON responses

---

🔸 4. Error Handling:

• fetch() doesn’t throw errors on HTTP error statuses (like 404, 500) — you must check manually.
• axios() automatically throws errors for non-2xx responses.

---

🔸 5. Request Cancellation:

• axios supports request cancellation using CancelToken.
• fetch requires additional use of AbortController (less straightforward).

---

🔸 6. Interceptors Support:

• axios allows setting request and response interceptors easily.
• fetch doesn’t support interceptors out of the box.

---

🔸 7. Node.js Support:

• axios works in both browser and Node.js.
• fetch() is browser-native and requires a polyfill in Node (e.g. node-fetch).

---

🔹 Why prefer Axios over Fetch?

✅ Shorter & cleaner syntax
✅ Better error handling
✅ JSON parsing by default
✅ Interceptors for adding auth tokens
✅ Supports timeout, cancellation
✅ Works easily in both browser and Node