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.