Axios interceptors in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when a request interceptor modifies headers?

Consider a Vue 3 component using Axios with a request interceptor that adds a custom header. What will be the value of the Authorization header sent with the request?

Vue

import axios from 'axios';
import { defineComponent } from 'vue';

const api = axios.create();

api.interceptors.request.use(config => {
  config.headers['Authorization'] = 'Bearer token123';
  return config;
});

export default defineComponent({
  async mounted() {
    const response = await api.get('/data');
    console.log(response.config.headers['Authorization']);
  }
});

A 'Bearer token123'

B null

C undefined

D Throws an error

💡 Hint

Think about what the interceptor does to the request config before sending.

The request interceptor adds the Authorization header to the config object before the request is sent. Therefore, the header will be 'Bearer token123' when logged.

❓ state_output

intermediate

What is the output after a response interceptor modifies data?

A response interceptor modifies the response data by adding a new property. What will be logged in the component?

Vue

import axios from 'axios';
import { defineComponent } from 'vue';

const api = axios.create();

api.interceptors.response.use(response => {
  response.data.modified = true;
  return response;
});

export default defineComponent({
  async mounted() {
    const response = await api.get('/info');
    console.log(response.data.modified);
  }
});

A false

B true

C Throws a TypeError

D undefined

💡 Hint

Check what the interceptor does to the response.data object.

The response interceptor adds a modified property with value true to the response.data object. So logging response.data.modified outputs true.

📝 Syntax

advanced

Which option correctly adds an error interceptor in Axios?

Identify the correct syntax to add an error handler in an Axios response interceptor.

A axios.interceptors.response.use(response => response).catch(error => Promise.reject(error));

B axios.interceptors.response.use(response => response, error => throw error);

C axios.interceptors.response.use(response => response, error => Promise.reject(error));

D axios.interceptors.response.catch(error => Promise.reject(error));

💡 Hint

Remember the use method takes two functions: one for success, one for error.

Option C correctly uses use with two functions: one for handling the response, and one for handling errors by rejecting the promise.

Option C incorrectly chains catch on use, which is not valid.

Option C uses throw inside an arrow function without braces, causing syntax error.

Option C tries to call catch on interceptors.response, which is invalid.

🔧 Debug

advanced

Why does this Axios interceptor cause infinite requests?

Given the code below, why does the app keep sending requests endlessly?

Vue

import axios from 'axios';

const api = axios.create();

api.interceptors.response.use(response => {
  if (response.status === 401) {
    api.get('/refresh-token');
  }
  return response;
});

A The interceptor is missing an error handler, causing unhandled exceptions.

B The interceptor does not return the response, causing a hang.

C The interceptor modifies the response status incorrectly, causing errors.

D The interceptor triggers a new request inside itself without stopping, causing infinite loops.

💡 Hint

Think about what happens when the interceptor calls api.get inside itself.

The interceptor calls api.get inside the response interceptor. This triggers the interceptor again for the new request, causing an infinite loop of requests.

🧠 Conceptual

expert

How to skip interceptors for a specific Axios request?

You want to send a request using Axios but skip all interceptors for it. Which approach achieves this?

A Create a new Axios instance without interceptors and use it for that request.

B Set a custom config property <code>skipInterceptors: true</code> in the request options.

C Use <code>axios.request</code> with <code>interceptors: false</code> option.

D Remove all interceptors before the request and add them back after.

💡 Hint

Interceptors are attached to Axios instances, so think about instance usage.

Interceptors are bound to Axios instances. Creating a new instance without interceptors and using it for specific requests avoids running interceptors.

Options B and C use non-existent config options. Option A is risky and can cause race conditions.

Practice

1. What is the main purpose of Axios interceptors in a Vue application?

easy

A. To modify requests or responses globally before they reach your components

B. To create new Axios instances for each API call

C. To replace Vue lifecycle hooks with Axios methods

D. To automatically refresh the Vue component state

Solution

1. Step 1: Understand Axios interceptors role

   Axios interceptors allow you to intercept and modify requests or responses globally before they reach your Vue components.

2. Step 2: Compare options

   Options B, C, and D describe unrelated or incorrect uses of Axios interceptors.

3. Final Answer:

   To modify requests or responses globally before they reach your components -> Option A

4. Quick Check:

   Interceptor purpose = Modify requests/responses globally [OK]

Hint: Interceptors act like global filters for requests and responses [OK]

Common Mistakes:

• Thinking interceptors create new Axios instances
• Confusing interceptors with Vue lifecycle hooks
• Assuming interceptors update component state automatically

2. Which of the following is the correct syntax to add a request interceptor using Axios in Vue?

easy

A. axios.use.interceptors.request(config => { return config })

B. axios.request.interceptors.use(config => { return config })

C. axios.interceptors.request.use(config => { return config })

D. axios.interceptors.use.request(config => { return config })

Solution

1. Step 1: Recall Axios interceptor syntax

   The correct syntax to add a request interceptor is axios.interceptors.request.use(callback).

2. Step 2: Identify correct option

   Only axios.interceptors.request.use(config => { return config }) matches the correct syntax; others have incorrect property order or method calls.

3. Final Answer:

   axios.interceptors.request.use(config => { return config }) -> Option C

4. Quick Check:

   Correct syntax = axios.interceptors.request.use [OK]

Hint: Remember: interceptors.request.use is the correct chain [OK]

Common Mistakes:

• Swapping 'request' and 'interceptors' order
• Using 'use' before 'interceptors'
• Missing the return of config in the callback

3. Given this Axios response interceptor code in Vue:

axios.interceptors.response.use(response => {
  response.data.modified = true;
  return response;
});

const result = await axios.get('/api/data');
console.log(result.data.modified);

What will be logged to the console?

medium

A. undefined

B. true

C. false

D. An error will occur

Solution

1. Step 1: Analyze the response interceptor

   The interceptor adds a property 'modified' with value true to response.data before returning it.

2. Step 2: Understand the logged value

   After the GET request, result.data.modified will be true because the interceptor modified it.

3. Final Answer:

   true -> Option B

4. Quick Check:

   Interceptor modifies data = logged true [OK]

Hint: Interceptors can add properties to response data before use [OK]

Common Mistakes:

• Assuming interceptor does not modify response
• Expecting undefined because property was added dynamically
• Thinking an error occurs due to property addition

4. Identify the error in this Vue Axios interceptor code:

axios.interceptors.request.use(config => {
  config.headers['Authorization'] = 'Bearer token';
});

medium

A. Missing return of config in the interceptor callback

B. Headers should be set on response, not config

C. Authorization header value must be a function

D. Interceptor should be added on axios.request, not axios.interceptors

Solution

1. Step 1: Check interceptor callback requirements

   Axios interceptors must return the config object after modifying it to continue the request chain.

2. Step 2: Identify missing return

   The code modifies headers but does not return config, causing the request to hang or fail.

3. Final Answer:

   Missing return of config in the interceptor callback -> Option A

4. Quick Check:

   Always return config in request interceptor [OK]

Hint: Always return config or response in interceptors [OK]

Common Mistakes:

• Forgetting to return config or response
• Setting headers on response instead of request config
• Misplacing interceptor on wrong Axios property

5. You want to globally handle 401 Unauthorized errors in your Vue app using Axios interceptors. Which approach correctly implements this behavior?

hard

A. Use a response interceptor to retry the request infinitely on 401 errors

B. Use a request interceptor to modify the request URL on 401 errors

C. Use a request interceptor to add a 401 status header before sending

D. Use a response interceptor to check error response status and redirect to login

Solution

1. Step 1: Understand 401 error handling

   401 Unauthorized errors come from server responses, so handling must be in a response interceptor.

2. Step 2: Choose correct handling method

   Use a response interceptor to check error response status and redirect to login correctly uses a response interceptor to detect 401 status and redirect user to login page.

3. Step 3: Eliminate incorrect options

   Retrying infinitely causes loops; using a request interceptor cannot handle response errors like 401; adding a 401 status header in the request is invalid.

4. Final Answer:

   Use a response interceptor to check error response status and redirect to login -> Option D

5. Quick Check:

   401 errors handled in response interceptor [OK]

Hint: Handle server errors in response interceptors, not request ones [OK]

Common Mistakes:

• Trying to handle response errors in request interceptors
• Retrying requests infinitely on 401 errors
• Adding fake status headers in requests