How I use axios in React

#axios #react #http

Axios is the one of the most common networking library used in React Ecosystem. We will go through multiple features of axios, which might make your life easier. The whole blog is based on one philosophy, DRY(Do Not Repeat Yourslef)

Q) I have to set the base path each time I make a request via axios, what other approach can I use?

Common Approach

import axios from 'axios';
import { BASE_PATH } from "./main.local";

const getBlogs = () => {
  return axios.get(BASE_PATH+"getBlogs");
}

The other approach that I mostly use is to create an axios instance for a base path, and use that axios instance so we don't need to add base path explicitly in every request we make, we can also define timeout, default headers, etc.

import axios from "axios";

export const axiosInstance = axios.create({
  baseURL: 'https://iamsourabhh.com/',
  timeout: 1000,
});

Now when you need to make a network request, import the axios instance instead of the node_module axios.

import { axiosInstance } from './axiosInstance';
import {BASE_PATH} from "./main.local";

const getBlogs = () => {
  return axiosInstance.get("getBlogs");
}

Q) I have to add auth token in my request explicitly in every request, what other approach I can use?

The axios provides a feature named interceptors, if you add a request interceptor on axios instance, every request will go through the interceptor before hitting to server.

import axios from "axios";

export const axiosInstance = axios.create({
  baseURL: 'https://iamsourabhh.com/',
  timeout: 1000,
});

axiosInstance.interceptors.request.use(function (config) {
    config.headers = { ...config.headers, auth_token: getAuthToken() };
    // you can also do other modification in config
    return config;
  }, function (error) {
    return Promise.reject(error);
  });

Q) I have to explicitly write logic to handle auth failures, what other approach can I use?

In this case, we will use a response interceptor, the request will go through the response interceptor, before returning the actual response.

import axios from "axios";

export const axiosInstance = axios.create({
  baseURL: 'https://iamsourabhh.com/',
  timeout: 1000,
});

axiosInstance.interceptors.request.use(function (config) {
    config.headers = { ...config.headers, auth_token: getAuthToken() };
    // you can also do other modification in config
    return config;
  }, function (error) {
    return Promise.reject(error);
  });

axiosInstance.interceptors.response.use(function (response) {
    if(response.status === 401) {
        // your failure logic
    }
    return response;
  }, function (error) {
    return Promise.reject(error);
  });