How to Use Interceptor with Vue: Simple Guide

In Vue, you use interceptors by adding them to your HTTP client like axios. Interceptors let you run code before a request is sent or after a response is received, helping you handle errors or add headers globally.

Syntax

Interceptors are functions you add to your HTTP client to catch requests or responses. You use axios.interceptors.request.use() to intercept requests and axios.interceptors.response.use() to intercept responses.

Each interceptor takes two functions: one for success and one for error handling.

javascript

axios.interceptors.request.use(
  function (config) {
    // Modify request config before sending
    return config;
  },
  function (error) {
    // Handle request error
    return Promise.reject(error);
  }
);

axios.interceptors.response.use(
  function (response) {
    // Process response data
    return response;
  },
  function (error) {
    // Handle response error
    return Promise.reject(error);
  }
);

Example

This example shows how to add interceptors in a Vue 3 app using Axios to add an authorization token to every request and handle errors globally.

javascript

import { createApp } from 'vue';
import axios from 'axios';
import App from './App.vue';

// Add a request interceptor
axios.interceptors.request.use(
  config => {
    // Add Authorization header
    const token = 'my-secret-token';
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

// Add a response interceptor
axios.interceptors.response.use(
  response => {
    // Return response data directly
    return response.data;
  },
  error => {
    alert('An error occurred: ' + error.message);
    return Promise.reject(error);
  }
);

const app = createApp(App);
app.config.globalProperties.$axios = axios;
app.mount('#app');

Output

When making HTTP requests with axios in Vue, each request will include the Authorization header, and errors will show an alert with the error message.

Common Pitfalls

• Not returning the config or response in interceptors causes requests or responses to hang.
• Forgetting to handle errors in interceptors can cause unhandled promise rejections.
• Adding interceptors multiple times (e.g., inside components) can cause duplicate headers or alerts.
• Not removing interceptors when components unmount can cause memory leaks.

javascript

/* Wrong: Missing return in request interceptor */
axios.interceptors.request.use(config => {
  config.headers.Authorization = 'token';
  // Missing return config here causes request to hang
  return config;
});

/* Right: Always return config */
axios.interceptors.request.use(config => {
  config.headers.Authorization = 'token';
  return config;
});

Quick Reference

Interceptor Methods:

• axios.interceptors.request.use(onSuccess, onError): Intercept requests.
• axios.interceptors.response.use(onSuccess, onError): Intercept responses.

Tips:

• Always return config or response in interceptors.
• Handle errors to avoid unhandled promise rejections.
• Add interceptors once, ideally in main.js or a plugin.

Key Takeaways

Use axios interceptors in Vue to modify requests or handle responses globally.

Always return the config or response object in interceptor functions.

Handle errors inside interceptors to prevent unhandled promise rejections.

Add interceptors once in your app setup to avoid duplicates and memory leaks.

Use interceptors to add headers like authorization tokens or show global error messages.