Using new keyword / extending axios object?

I’m interesting in creating an API wrapper and extending from axios using es6 classes. How is this possible? Axios has a method .create() which allows you to generate a new axios object.

class Api extends Axios {
  constructor(...args){
    super(..args)
    this.defaults.baseURL = 'https://api.com'
  }
  cancelOrder (id) {
    return this.put(`/cancel/order/${id}`)
  }
}

I know I have access to this let instance = axios.create().

Any thoughts?

Attempt 1

import axios from 'axios'
const Axios = axios.create()

class Api extends Axios {
  constructor (...args) {
    super(...args)
    this.defaults.baseURL = 'https://api.com'
  }
  cancelOrder (id) {
    return this.put(`/cancel/order/${id}`)
  }
}

let api = new Api()

api.cancelOrder('hi')
  .then(console.log)
  .catch(console.log)

Attempt 2

import axios from 'axios'

class Axios {
  constructor () {
    return axios.create()
  }
}

class Api extends Axios {
  constructor () {
    super()
    this.defaults.baseURL = 'https://api.com'
  }
  cancelOrder (id) {
    return this.put(`/cancel/order/${id}`)
  }
}

let api = new Api()

console.log(api.__proto__)

api.cancelOrder('hi')
  .then(console.log)
  .catch(console.log)

[SavePointSam]

For anyone that ends up here in the future. If you’re just trying to define a way to get a new instance with application standard options, or wrap an axios instance in a custom es6 class. You just need to return the instance you define from the class constructor.

import axios from 'axios';

// add session token to all requests
const requestInterceptor = (config) => ({
  ...config,
  headers: {
    ...config.headers,
    'x-auth-token': localStorage.getItem('token'),
  },
});

class Client {
  constructor() {
    const options = {};
    const instance = axios.create(options);

    instance.interceptors.request.use(requestInterceptor);

    return instance;
  }
}

export default Client;

import Client from './Client';

const getUsers = () => (
  new Client().get('/api/users')
);

[yordis]

Just for a little feedback in about @SavePointSam comment

That is just a function call, you do not need to create a class for do what he is suggesting to do.

const Client = () => {
    const options = {};
    const instance = axios.create(options);

    instance.interceptors.request.use(requestInterceptor);

    return instance;
  }

const client = Client()

also in terms of readability I wouldn’t do it either. It is not a good practice to be returning different objects from the original object you are trying to create a from.

When I do new Client() I am expecting a instance of Client no AxiosInstance.