An example Service class wrapper for Axios

service.js

import axios from 'axios';

class Service {
  constructor() {
    let service = axios.create({
      headers: {csrf: 'token'}
    });
    service.interceptors.response.use(this.handleSuccess, this.handleError);
    this.service = service;
  }

  handleSuccess(response) {
    return response;
  }

  handleError = (error) => {
    switch (error.response.status) {
      case 401:
        this.redirectTo(document, '/')
        break;
      case 404:
        this.redirectTo(document, '/404')
        break;
      default:
        this.redirectTo(document, '/500')
        break;
    }
    return Promise.reject(error)
  }

  redirectTo = (document, path) => {
    document.location = path
  }
  
  get(path, callback) {
    return this.service.get(path).then(
      (response) => callback(response.status, response.data)
    );
  }

  patch(path, payload, callback) {
    return this.service.request({
      method: 'PATCH',
      url: path,
      responseType: 'json',
      data: payload
    }).then((response) => callback(response.status, response.data));
  }

  post(path, payload, callback) {
    return this.service.request({
      method: 'POST',
      url: path,
      responseType: 'json',
      data: payload
    }).then((response) => callback(response.status, response.data));
  }
}

export default new Service;

Sample usage code needed.

@arunpkumar92, Sample code to use. Import and use it.

  Service.get(
            "url"
            params,
            (response) => {
                console.log("****** response is *******", response);
            }
        )

@kiritnim Thanks for the help.

Hi! what about handling auth headers?

Thank you.
I code a dynamic version for this purpose and packed it under the name js-service-wrapper.
A promise based collective service wrapper with queue support which totally works in browser and/or Node.js environment

how to handle call api refresh token with this class ? please send me some example

Is it possible to provide a parameterized constructor? And how exactly can we implement it?

why do we need this wrapper service instead of direct axios?

@Sovai just to add all the common config at one place.

@Sovai if any time you need to change the axios for XYZ reasons you don't have to do it manually in all of your requests you can change it in a single file. It will save your time and efforts