Axios setup and configuration in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when Axios is configured with a base URL?

Consider a Vue component that uses Axios with a base URL set. What will be the full request URL when making a GET request to '/users'?

Vue

import axios from 'axios';

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

export default {
  methods: {
    fetchUsers() {
      return apiClient.get('/users');
    }
  }
};

A The request URL will be 'https://api.example.com/v1//users' with a double slash.

B The request URL will be '/users' only, ignoring the base URL.

C The request URL will be 'https://api.example.com/users', missing the '/v1' segment.

D The request URL will be 'https://api.example.com/v1/users'.

💡 Hint

Think about how Axios combines the base URL with the request path.

Axios appends the request path to the base URL. Since the base URL ends with '/v1' and the request path starts with '/users', Axios combines them correctly without duplicating slashes.

📝 Syntax

intermediate

Which Axios configuration option sets a timeout for requests?

Identify the correct Axios configuration option to set a request timeout of 5000 milliseconds.

A { timeout: 5000 }

B { time: 5000 }

C { delay: 5000 }

D { wait: 5000 }

💡 Hint

Look for the option that controls how long Axios waits before aborting a request.

The correct option is 'timeout'. It specifies the number of milliseconds before the request times out.

🔧 Debug

advanced

Why does this Axios request fail with a CORS error?

Examine the Axios request code below. Why might it cause a CORS error in the browser?

Vue

import axios from 'axios';

axios.get('https://api.example.com/data', {
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer token123'
  }
}).then(response => {
  console.log(response.data);
}).catch(error => {
  console.error(error);
});

A The 'mode' option is not valid in Axios and does not affect CORS, causing the error.

B Axios automatically disables CORS, so the error is unrelated to this code.

C The 'Content-Type' header must be 'text/plain' to avoid CORS errors.

D The 'Authorization' header is missing, causing the server to reject the request.

💡 Hint

Check which options Axios supports and how CORS is handled in browsers.

The 'mode' option is a Fetch API option, not supported by Axios. Setting it has no effect. CORS errors are controlled by server headers and browser policies, not by Axios options.

❓ state_output

advanced

What is the value of 'responseData' after this Axios call?

Given the following Vue component method using Axios, what will be the value of this.responseData after the call?

Vue

import axios from 'axios';

export default {
  data() {
    return { responseData: null };
  },
  methods: {
    async loadData() {
      try {
        const response = await axios.get('https://api.example.com/items');
        this.responseData = response.data.items;
      } catch (error) {
        this.responseData = [];
      }
    }
  }
};

A The entire Axios response object including headers and status.

B Null, because the assignment is asynchronous and not awaited.

C An array of items from the server response, or an empty array if the request fails.

D Undefined, since 'responseData' is not initialized in data().

💡 Hint

Consider what response.data.items represents and how errors are handled.

The method assigns response.data.items to responseData on success. On failure, it assigns an empty array. The data property is initialized as null but updated after the async call.

🧠 Conceptual

expert

Which Axios interceptor setup correctly logs request URLs before sending?

Choose the correct way to add a request interceptor in Axios that logs the request URL before the request is sent.

A axios.use.interceptors.request(config => { console.log(config.url); return config; });

B axios.interceptors.request.use(config => { console.log(config.url); return config; });

C axios.request.interceptors.use(config => { console.log(config.url); return config; });

D axios.interceptors.use('request', config => { console.log(config.url); return config; });

💡 Hint

Recall the correct Axios interceptor syntax for requests.

The correct syntax is axios.interceptors.request.use(callback). Other options use invalid properties or methods.