Axios interceptors in Vue - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is an Axios interceptor?

An Axios interceptor is a function that runs before a request is sent or after a response is received. It lets you modify or handle requests and responses globally in one place.

beginner

How do you add a request interceptor in Axios?

Use axios.interceptors.request.use() and pass a function that receives the request config. You can change the config or add headers before the request is sent.

beginner

What is the purpose of a response interceptor in Axios?

A response interceptor lets you handle or modify the response data before your app uses it. You can also catch errors globally here.

intermediate

How do you remove an Axios interceptor?

When you add an interceptor, it returns an ID. Use axios.interceptors.request.eject(id) or axios.interceptors.response.eject(id) to remove it.

beginner

Why use Axios interceptors in a Vue app?

Interceptors help keep your code clean by handling things like adding auth tokens, logging, or error handling in one place instead of repeating it everywhere.

Which method adds a request interceptor in Axios?

A axios.interceptors.request.use()

B axios.addRequestInterceptor()

C axios.request.interceptor()

D axios.useRequestInterceptor()

The correct method to add a request interceptor is axios.interceptors.request.use().

What can you do inside an Axios response interceptor?

A Cancel the request

B Change the request URL

C Add headers to the request

D Modify response data before it reaches your code

Response interceptors let you modify or handle the response data before your app uses it.

How do you remove an Axios interceptor?

A axios.interceptors.request.eject(id)

B axios.interceptors.request.remove(id)

C axios.interceptors.eject(id)

D axios.removeInterceptor(id)

You remove a request interceptor with axios.interceptors.request.eject(id) and a response interceptor with axios.interceptors.response.eject(id).

Why are Axios interceptors useful in Vue apps?

A They speed up the app by caching requests

B They let you handle common tasks like auth or errors in one place

C They replace Vue lifecycle hooks

D They automatically update the UI

Interceptors help keep code clean by handling common tasks like authentication or error handling globally.

What arguments does axios.interceptors.request.use() accept?

A Only an error function

B Only a success function

C A function for success and a function for error

D No arguments

It accepts two functions: one for handling the request config on success, and one for handling errors.

Explain how to use Axios interceptors to add an authorization token to every request in a Vue app.

Think about changing the request config before it is sent.

Describe how you can globally handle HTTP errors using Axios interceptors in Vue.

Focus on what happens after a response is received.