🚀 Efficient API Calls with Axios: Cancelling Unwanted Requests 🚀

⚠️ When working with frontend applications, API requests can pile up, especially with features like live search or auto-suggestions.
⚠️ If you don’t cancel outdated requests, you waste bandwidth and slow down your app.
⚠️ Outdated requests can sometimes cause flickering UI

❤️ If you are using Axios to make API requests, here are the two ways you can do:
✅ Use AbortController (For versions > 0.22)
👉 AbortController provides a signal that Axios listens to.
👉 When abort() is called, it immediately stops the request, preventing unnecessary responses from being processed.

import axios from "axios";

const controller = new AbortController();
const signal = controller.signal;

axios.get("https://api.example.com/data", { signal })
  .then(response => console.log(response.data))
  .catch(error => {
    if (error.name === "AbortError") {
      console.log("Request was canceled");
    } else {
      console.error("Request failed", error);
    }
  });

// Cancel the request
controller.abort();

✅ Use CancelToken (For versions < 0.22)
👉 CancelToken creates a cancelable request by passing a token.
👉 The token acts as a reference to the request, allowing Axios to identify and cancel it when needed.
👉 When cancel() is called on the token, Axios recognizes the signal and aborts the associated request, preventing unnecessary processing.

import axios from "axios";

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get("https://api.example.com/data", { cancelToken: source.token })
  .then(response => console.log(response.data))
  .catch(error => {
    if (axios.isCancel(error)) {
      console.log("Request was canceled:", error.message);
    } else {
      console.error("Request failed", error);
    }
  });

// Cancel the request
source.cancel("Operation canceled by the user.");

---

Follow me to stay updated with my future posts:

• Linkedin
• Github
• Twitter/ X