Axios setup and configuration in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import Axios in a Vue component.

Vue

import [1] from 'axios';

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

Afetch

Baxios

Chttp

DAxios

Attempts:

3 left

💡 Hint

Common Mistakes

Using uppercase 'Axios' instead of lowercase 'axios'.

Trying to import 'http' or 'fetch' which are different libraries.

The correct import name for Axios is axios with a lowercase 'a'.

2fill in blank

medium

Complete the code to create an Axios instance with a base URL.

Vue

const api = axios.[1]({ baseURL: 'https://api.example.com' });

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

Ainit

Bnew

CcreateInstance

Dcreate

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'new' keyword which is not how Axios instances are created.

Using 'createInstance' or 'init' which are not valid Axios methods.

The method to create a new Axios instance is create.

3fill in blank

hard

Fix the error in setting a default header for the Axios instance.

Vue

api.defaults.headers.common['[1]'] = 'Bearer token123';

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

AAuthorization

Bauthorization

CAuth

DToken

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase 'authorization' which may cause issues in some environments.

Using 'Auth' or 'Token' which are not standard header names.

The correct header name for bearer tokens is Authorization with uppercase 'A'.

4fill in blank

hard

Fill both blanks to add a request interceptor that logs the request URL.

Vue

api.interceptors.[1].use(config => { console.log(config.[2]); return config; });

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

Arequest

Bresponse

Curl

DbaseURL

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'response' instead of 'request' for intercepting outgoing requests.

Logging 'baseURL' instead of 'url' which may not show the full request path.

To intercept requests, use request interceptor and log the url property from the config.

5fill in blank

hard

Fill all three blanks to create a GET request with Axios and handle the response.

Vue

api.[1]('/users')
  .then(response => {
    console.log(response.[2]);
  })
  .catch(error => {
    console.error(error.[3]);
  });

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

Aget

Bdata

Cmessage

Dpost

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'post' instead of 'get' for a GET request.

Trying to access 'response.body' which is not how Axios returns data.

Accessing 'error.data' instead of 'error.message' for error details.

Use get to make a GET request, access data from the response, and message from the error.