Using Axios Request Interceptor

#axios #http #100daysofcode #javascript

What is Axios Request Interceptor?

Axios Request Interceptor is a method in the promise-based HTTP client that allow you to run your code or modify the request before the actual call to the endpoint is made.

A simple use case is if you want to check whether certain credentials are valid before making a request, you can do this with a request interceptor. Or if you need to attach a token to every request made, instead of duplicating the token addition logic at every axios call, you can make an interceptor which attaches a token on every request that is made.

To demonstrate, I want to switch between two baseUrl depending on if it is available or not.

Base Code:

import constants from "constants";
import axios from "axios";

const { apiUrl } = constants;

export default axios.create({
  baseURL: apiUrl,
});

With request interceptors:

import constants from "constants";
import axios from "axios";

const { apiUrlOne, apiUrlTwo} = constants;

//create instance
const app = axios.create();

//check if endpoint is available
const isAvailable = async () => {
  const res = await fetch(apiUrlOne);
  if (res.ok) {
    return apiUrlOne;
  }
  return apiUrlTwo;
};

app.interceptors.request.use(
  async (config) => {
    const conf = config;
    const url = await isAvailable();

    //update the request baseURL
    conf.baseURL = url;

    //return the request configurations
    return conf;
  },
  (error) => Promise.reject(error)
);

This is just a demonstration on how to use the Axios request interceptor. Cool yeah!. Learn more at axios docs

Top comments (4)

Dylan • Jun 9 '20

So close, you had a great start but a very quick ending! You should go into more detail about the implementation of the interceptor and what you can and can't do and why you'd use it.