Axios interceptors in Vue - Mini Project: Build & Apply

Using Axios Interceptors in Vue

📖 Scenario: You are building a Vue app that fetches user data from an API. You want to add a way to automatically add an authorization token to every request and handle errors globally.

🎯 Goal: Build a Vue component that uses Axios interceptors to add an authorization header to all requests and logs errors from responses.

📋 What You'll Learn

Create an Axios instance

Add a request interceptor to include an authorization token

Add a response interceptor to catch errors

Use the Axios instance in a Vue component to fetch data

💡 Why This Matters

🌍 Real World

Many web apps need to communicate with APIs securely and handle errors consistently. Axios interceptors help automate adding tokens and error handling.

💼 Career

Understanding Axios interceptors is essential for frontend developers working with Vue or other frameworks to build robust API integrations.

1

Create Axios instance

Create an Axios instance called apiClient using axios.create() with the base URL set to 'https://api.example.com'.

Vue

# Create an Axios instance called apiClient with baseURL 'https://api.example.com'
# Your code here

Need a hint?

Use axios.create() and pass an object with baseURL.

2

Add request interceptor

Add a request interceptor to apiClient using apiClient.interceptors.request.use. The interceptor should add an Authorization header with the value 'Bearer mytoken123' to the config headers.

Vue

import axios from 'axios'

const apiClient = axios.create({
  baseURL: 'https://api.example.com'
})

# Add a request interceptor to apiClient to add Authorization header
# Your code here

Need a hint?

The request interceptor receives config. Add the header and return config.

3

Add response interceptor

Add a response interceptor to apiClient using apiClient.interceptors.response.use. The interceptor should return the response if successful, and if there is an error, log 'API error:' followed by the error to the console, then rethrow the error.

Vue

import axios from 'axios'

const apiClient = axios.create({
  baseURL: 'https://api.example.com'
})

apiClient.interceptors.request.use(config => {
  config.headers.Authorization = 'Bearer mytoken123'
  return config
})

# Add a response interceptor to apiClient to log errors
# Your code here

Need a hint?

The response interceptor takes two functions: one for success, one for error. Log the error and rethrow it.

4

Use Axios instance in Vue component

Create a Vue component named UserList using <script setup>. Import ref and onMounted from 'vue' and apiClient. Create a users ref initialized to an empty array. Use onMounted to fetch /users from apiClient and assign the response data to users.value. Add a template that lists user names in an unordered list.

Vue

// Import ref and onMounted from 'vue' and apiClient
// Create users ref and fetch users on mounted
// Your code here



  
    
  

Need a hint?

Use ref for reactive data and onMounted to fetch data once the component loads. Use v-for to list users.