Использование класса es6 для расширения Axios

Question

Я интересуюсь созданием обертки API и расширением от axios, используя классы es6. Как это возможно? В Axios есть метод.create(), который позволяет генерировать новый объект Axios.

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

Я знаю, что у меня есть доступ к этому let instance = axios.create(),

Какие-нибудь мысли?

Попытка 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)

Попытка 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)

Answer 1

axios в настоящее время не экспортирует Axios объект, который он использует внутри.

.create() Метод только создает экземпляр нового экземпляра.

// Factory for creating new instances
axios.create = function create(defaultConfig) {
  return new Axios(defaultConfig);
};

Я создал PR, который экспортирует Axios учебный класс.

https://github.com/reggi/axios/commit/7548f2f79d20031cd89ea7c2c83f6b3a9c2b1da4

И проблема GitHub здесь:

https://github.com/mzabriskie/axios/issues/320

Answer 2

Если вы посмотрите на исходный код axios, они, кажется, не выставляют "класс" для Axiosтолько экземпляр.

Я не верю, что экземпляр объекта может быть расширен в es6.

---

Ваша вторая попытка кажется наиболее жизнеспособной, но если вы хотите подражать каждому axios метод, у вас может быть много накладных расходов.

Answer 3

      import axios, { Axios } from 'axios';

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

Answer 4

Вы можете установить этот пакет: npm i axios-es6-class

Answer 5

Я также хотел создать класс, который позволил бы мне создавать несколько экземпляров с предопределенными значениями по умолчанию. Вот мое решение.

import axios from 'axios'

export class Axios {
    constructor() {
        return axios.create({
            baseURL: 'http://127.0.0.1:8080/',
            headers: {
                Authorization: 'AUTH TOKEN FROM INSTANCE',
                'Content-Type': 'application/json',
            },
        })
   }

}

const db = new Axios()

db.get('/your_url').then().catch()

Answer 6

Что ж, во многих ответах говорится, что класс «Axios» не экспортируется из пакета axios, но это неверно, по крайней мере, для версии 0.26.0. Что ж, если вы хотите создать экземпляр Axios самостоятельно и настроить его по своему желанию, это довольно просто. Я создал пример, используя машинописный текст, не стесняйтесь использовать его, если хотите.

      import { Axios, AxiosRequestConfig } from "axios";

class AxiosService<D = any> extends Axios {
  constructor(config?: AxiosRequestConfig<D>) {
    super(config);
    this.defaults.baseURL = 'https://api.com'
    
    this.interceptors.request.use(interceptorConfig => {
      // Set up your default interceptor behavior here for requests, if you want
      }
    );
    this.interceptors.response.use(
      response => {
        return response;
      },
      error => {
        // Same thing here, set the behavior for onError responses
      }
    );
   }

   cancelOrder (id) {
    return this.put(`/cancel/order/${id}`)
   }

  }
/*
  Here you can choose between exporting the class or a instance of it
  in my case i just want to export the instance with some default config
  and use it, you may ask yourself why that's because i want to centrilize
  the configs on one axios instance instead of multiple instances.
*/
const axiosInstance = new AxiosService({
  // You may want to set this so axios automatically parse your data to a object.
  transformResponse: res => { 
    return JSON.parse(res);
  },
  headers: { "Access-Control-Allow-Origin": "true" },
});

export { axiosInstance };