Axios setup and configuration in Vue - Step-by-Step Execution

Concept Flow - Axios setup and configuration

Import Axios

↓

Create Axios Instance

↓

Set Base URL & Headers

↓

Use Instance in Vue Component

↓

Make HTTP Request

↓

Handle Response or Error

↓

Update Component State

This flow shows how to import Axios, create a configured instance, use it in a Vue component to make requests, and handle responses.

Execution Sample

Vue

import axios from 'axios'

const api = axios.create({
  baseURL: 'https://api.example.com',
  headers: { Authorization: 'Bearer token' }
})

This code creates an Axios instance with a base URL and authorization header for reuse in Vue components.

Execution Table

Step	Action	Axios Instance State	Request Made	Response/Result
1	Import axios	No instance yet	No	N/A
2	Create axios instance with baseURL and headers	Instance with baseURL=https://api.example.com, headers={Authorization: Bearer token}	No	N/A
3	Call api.get('/users') in Vue component	Instance unchanged	GET https://api.example.com/users with headers	Pending
4	Receive response 200 with user data	Instance unchanged	No new request	Response data received
5	Update Vue component state with data	Instance unchanged	No new request	Component re-renders with data
6	Handle error if request fails	Instance unchanged	No new request	Error handled gracefully
7	End of flow	Instance unchanged	No new request	Process complete

💡 Request completes with response or error, component updates state, flow ends.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	Final
api	undefined	Axios instance with baseURL and headers	Same instance	Same instance	Same instance
response	undefined	undefined	undefined	Response object with data	Response object with data or error
componentState	empty	empty	empty	updated with response data	updated with response data or error state

Key Moments - 2 Insights

Why do we create an Axios instance instead of using axios directly?

Creating an instance lets us set baseURL and headers once, so all requests use them automatically, as shown in execution_table step 2 and 3.

What happens if the request fails?

The error is caught and handled gracefully without crashing the app, as shown in execution_table step 6.

Visual Quiz - 3 Questions

Look at the execution table, what is the state of the 'api' variable after step 3?

A An Axios instance with baseURL and headers

B Undefined

C A plain object without configuration

D A response object

💡 Hint

Check the 'Axios Instance State' column at step 3 in the execution_table.

At which step does the Vue component update its state with the response data?

A Step 2

B Step 4

C Step 5

D Step 6

💡 Hint

Look for 'Update Vue component state' in the 'Action' column of execution_table.

If the baseURL was not set in the Axios instance, how would the request URL change at step 3?

A It would use the full URL 'https://api.example.com/users'

B It would use '/users' as a relative URL, likely causing an error

C It would default to 'http://localhost/users'

D It would not make any request

💡 Hint

Refer to the 'Request Made' column at step 3 and think about how baseURL affects request URLs.

Concept Snapshot

Axios setup and configuration:
- Import axios
- Create instance with axios.create({ baseURL, headers })
- Use instance in Vue components for requests
- Handles base URL and headers automatically
- Catch errors to avoid app crashes
- Update component state with response data

Full Transcript

This visual execution shows how to set up Axios in Vue by importing it, creating a configured instance with a base URL and headers, then using that instance to make HTTP requests inside Vue components. The flow includes making a request, receiving a response or error, and updating the component state accordingly. Variables like the Axios instance and response data change as the code runs. Key points include why creating an instance is helpful and how errors are handled gracefully. The quiz tests understanding of instance state, component updates, and URL formation.

Practice

1. What is the main purpose of using axios.create() in a Vue project?

easy

A. To convert Axios requests into Vue components

B. To automatically fetch data when the component mounts

C. To create a reusable Axios client with custom settings

D. To replace Vue's reactive system with Axios

Solution

1. Step 1: Understand axios.create()

   This method creates a new Axios instance that can have its own configuration like baseURL, headers, and timeout.

2. Step 2: Purpose in Vue projects

   Using axios.create() helps keep your API calls consistent and reusable across components by sharing the same settings.

3. Final Answer:

   To create a reusable Axios client with custom settings -> Option C

4. Quick Check:

   axios.create() = reusable client [OK]

Hint: Remember axios.create() makes a custom client [OK]

Common Mistakes:

• Thinking axios.create() fetches data automatically
• Confusing axios.create() with Vue lifecycle hooks
• Assuming axios.create() changes Vue's reactivity

2. Which of the following is the correct way to set a base URL when creating an Axios instance?

easy

A. const api = axios.create('https://api.example.com')

B. const api = axios.create(baseURL = 'https://api.example.com')

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

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

Solution

1. Step 1: Check axios.create() syntax

   axios.create() accepts an object with configuration keys like baseURL, timeout, and headers.

2. Step 2: Identify correct baseURL usage

   The correct key for setting the base URL is baseURL inside the config object.

3. Final Answer:

   const api = axios.create({ baseURL: 'https://api.example.com' }) -> Option D

4. Quick Check:

   baseURL inside object = const api = axios.create({ baseURL: 'https://api.example.com' }) [OK]

Hint: Use an object with baseURL key inside axios.create() [OK]

Common Mistakes:

• Passing baseURL as a separate argument
• Using url instead of baseURL
• Passing a string directly without an object

3. Given this Axios instance setup in a Vue component:

const api = axios.create({ baseURL: 'https://api.example.com', timeout: 1000 });

api.get('/users')
  .then(response => console.log(response.data))
  .catch(error => console.log('Error:', error.message));

What will happen if the server takes 2 seconds to respond?

medium

A. The request will timeout and log an error message

B. The request will succeed and log the user data

C. The request will retry automatically until success

D. The request will hang indefinitely without error

Solution

1. Step 1: Understand timeout setting

   The timeout is set to 1000 milliseconds (1 second), so if the server takes longer, Axios will abort the request.

2. Step 2: Effect on slow response

   Since the server takes 2 seconds, which is longer than 1 second, Axios triggers a timeout error and the catch block runs.

3. Final Answer:

   The request will timeout and log an error message -> Option A

4. Quick Check:

   Timeout 1s > 2s response = error [OK]

Hint: Timeout shorter than response time causes error [OK]

Common Mistakes:

• Assuming Axios retries automatically
• Thinking the request will succeed despite timeout
• Ignoring the catch block handling

4. Identify the error in this Axios setup code inside a Vue component:

const api = axios.create({
  baseURL: 'https://api.example.com',
  timeout: '5000',
  headers: { 'Content-Type': 'application/json' }
});

medium

A. timeout should be a number, not a string

B. baseURL must be inside headers object

C. Content-Type header is invalid here

D. axios.create() cannot have headers property

Solution

1. Step 1: Check timeout data type

   Timeout expects a number representing milliseconds, but here it is a string '5000'.

2. Step 2: Validate other properties

   baseURL is correctly placed, and headers with Content-Type is valid for axios.create().

3. Final Answer:

   timeout should be a number, not a string -> Option A

4. Quick Check:

   timeout must be number, not string [OK]

Hint: Timeout must be numeric, not quoted string [OK]

Common Mistakes:

• Putting baseURL inside headers
• Removing headers property
• Using string for timeout value

5. You want to create an Axios instance in Vue that automatically adds an Authorization header with a token stored in localStorage for every request. Which setup is correct?

hard

A. const api = axios.create({ baseURL: 'https://api.example.com' }); api.defaults.headers.common['Authorization'] = `Bearer ${localStorage.getItem('token')}`;

B. const api = axios.create({ baseURL: 'https://api.example.com' }); api.interceptors.request.use(config => { config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`; return config; });

C. const api = axios.create({ baseURL: 'https://api.example.com', headers: { Authorization: `Bearer ${localStorage.getItem('token')}` } });

D. const api = axios.create({ baseURL: 'https://api.example.com', headers: { Authorization: localStorage.token } });

Solution

1. Step 1: Understand token dynamic retrieval

   The token in localStorage can change, so it should be read fresh before each request, not just once at setup.

2. Step 2: Use Axios interceptor for dynamic headers

   Using an interceptor lets you add or update headers before every request, ensuring the latest token is used.

3. Step 3: Evaluate options

   const api = axios.create({ baseURL: 'https://api.example.com' }); api.interceptors.request.use(config => { config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`; return config; }); uses an interceptor to set Authorization header dynamically. Options A and C set it once at creation, which may become stale. const api = axios.create({ baseURL: 'https://api.example.com', headers: { Authorization: localStorage.token } }); uses incorrect localStorage access.

4. Final Answer:

   Use an interceptor to add Authorization header dynamically before each request -> Option B

5. Quick Check:

   Interceptor for dynamic token = const api = axios.create({ baseURL: 'https://api.example.com' }); api.interceptors.request.use(config => { config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`; return config; }); [OK]

Hint: Use request interceptor to add fresh token each time [OK]

Common Mistakes:

• Setting headers once at creation, ignoring token updates
• Accessing localStorage.token instead of getItem()
• Not returning config in interceptor