Axios interceptors in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a request interceptor to Axios.

Vue

axios.interceptors.request.use(function(config) {
  // Modify config here
  return [1];
});

Drag options to blanks, or click blank then click option'

Arequest

Bresponse

Cconfig

Derror

Attempts:

3 left

💡 Hint

Common Mistakes

Returning the response instead of config.

Not returning anything from the interceptor.

The request interceptor must return the config object to continue the request.

2fill in blank

medium

Complete the code to add a response interceptor that handles errors.

Vue

axios.interceptors.response.use(function(response) {
  return response;
}, function([1]) {
  // Handle error
  return Promise.reject(error);
});

Drag options to blanks, or click blank then click option'

Aerror

Bresponse

Cconfig

Drequest

Attempts:

3 left

💡 Hint

Common Mistakes

Using response instead of error in the error handler.

Not returning Promise.reject(error) to propagate the error.

The error handler function receives the error object.

3fill in blank

hard

Fix the error in the interceptor code to correctly add an Authorization header.

Vue

axios.interceptors.request.use(function(config) {
  config.headers.Authorization = 'Bearer ' + [1];
  return config;
});

Drag options to blanks, or click blank then click option'

Aresponse

Btoken

Cerror

Dconfig

Attempts:

3 left

💡 Hint

Common Mistakes

Using config or response instead of the token string.

Forgetting to concatenate 'Bearer ' before the token.

The token variable holds the authorization token string to add to headers.

4fill in blank

hard

Fill both blanks to create an interceptor that logs the URL and method of each request.

Vue

axios.interceptors.request.use(function(config) {
  console.log('Request:', config.[1], config.[2]);
  return config;
});

Drag options to blanks, or click blank then click option'

Aurl

Bmethod

Cdata

Dheaders

Attempts:

3 left

💡 Hint

Common Mistakes

Using data or headers instead of url or method.

Logging undefined properties.

The config.url and config.method properties hold the request URL and HTTP method.

5fill in blank

hard

Fill all three blanks to create a response interceptor that extracts data and handles errors with a custom message.

Vue

axios.interceptors.response.use(function([1]) {
  return response.[2];
}, function(error) {
  console.error('Request failed:', error.[3]);
  return Promise.reject(error);
});

Drag options to blanks, or click blank then click option'

Aresponse

Bdata

Cmessage

Dconfig

Attempts:

3 left

💡 Hint

Common Mistakes

Not returning response.data but the whole response.

Logging error.config instead of error.message.

The response object is passed in, and its data property holds the server data. The error object has a message property describing the error.