Make HTTP Requests in a Vue App with Axios — Handling Errors and Cancellation

Photo by visuals on Unsplash

Axios is a popular HTTP client that is used with Vue apps.

In this article, we’ll look at how to make requests with Axios in a Vue app.

Removing Interceptors

We can remove request or response interceptors with the eject method.

For example, we can write:

<template>
  <div id="app"></div>
</template>
<script>
import axios from "axios";
const interceptor = axios.interceptors.response.use(
  config => {
    console.log(config);
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);
export default {
  name: "App",
  async beforeMount() {
    const { data } = await axios({
      method: "get",
      url: "https://jsonplaceholder.typicode.com/posts/1"
    });
    console.log(data);
    axios.interceptors.request.eject(interceptor);
  }
};
</script>

to cal the eject method to remove the interceptor.

Add Interceptor to a Custom Instance of Axios

We can add a request or response interceptor to a custom instance of Axios.

To do that, we write:

<template>
  <div id="app"></div>
</template>
<script>
import…