Axios interceptors in Vue - Step-by-Step Execution

Concept Flow - Axios interceptors

Request made by Vue component

↓

Request Interceptor runs

↓

Request sent to server

↓

Response received from server

↓

Response Interceptor runs

↓

Response delivered to Vue component

This flow shows how Axios interceptors catch requests before sending and responses after receiving, allowing modification or handling.

Execution Sample

Vue

import axios from 'axios';

axios.interceptors.request.use(config => {
  config.headers['X-Test'] = '123';
  return config;
});

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

This code adds headers before requests and modifies response data after receiving it.

Execution Table

Step	Action	Input/State	Output/State	Notes
1	Vue component calls axios.get('/api/data')	No headers	Request config with URL '/api/data'	Start request
2	Request interceptor runs	Request config	Request config with header 'X-Test: 123'	Header added
3	Request sent to server	Request config with header	Waiting for response	Request sent
4	Response received	Raw response {data: {value: 42}}	Raw response	Server replied
5	Response interceptor runs	Raw response	Response with data.modified = true	Response data modified
6	Vue component receives response	Modified response	Data with value 42 and modified true	Final data delivered
7	End	N/A	N/A	Request cycle complete

💡 Request and response cycle ends after interceptors modify and deliver data.

Variable Tracker

Variable	Start	After Step 2	After Step 5	Final
config.headers	{}	{"X-Test": "123"}	{"X-Test": "123"}	{"X-Test": "123"}
response.data	{value: 42}	{value: 42}	{value: 42, modified: true}	{value: 42, modified: true}

Key Moments - 2 Insights

Why does the request interceptor need to return the config object?

Because axios uses the returned config to send the request. If you don't return it (see Step 2 in execution_table), the request won't proceed.

What happens if the response interceptor does not return the response?

The Vue component will not receive the response data (see Step 5). Returning the response is necessary to continue the chain.

Visual Quiz - 3 Questions

Look at the execution table, what header is added by the request interceptor at Step 2?

A 'X-Test: 123'

B 'Authorization: Bearer token'

C 'Content-Type: application/json'

D No header added

💡 Hint

Check the Output/State column at Step 2 in the execution_table.

At which step does the response data get modified?

A Step 3

B Step 5

C Step 1

D Step 6

💡 Hint

Look for 'Response data modified' note in the execution_table.

If the request interceptor did not return the config, what would happen?

A Request would still send normally

B Response interceptor would run twice

C Request would be blocked and not sent

D Vue component would receive an error immediately

💡 Hint

Refer to the key_moments explanation about returning config in Step 2.

Concept Snapshot

Axios interceptors let you run code before requests and after responses.
Use axios.interceptors.request.use(fn) to modify requests.
Use axios.interceptors.response.use(fn) to modify responses.
Always return config or response to continue the chain.
Useful for adding headers, logging, or error handling.

Full Transcript

Axios interceptors in Vue let you catch requests before they go out and responses when they come back. The request interceptor can add headers or change the request settings. The response interceptor can change the data before your component sees it. Both interceptors must return their input to keep the process going. This way, you can add things like authentication tokens or modify data globally in one place.