使用es6类扩展Axios

Question

我对创建 API 包装器并使用 es6 类从 axios 进行扩展很感兴趣。这怎么可能？ 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);
};

我创建了一个导出

Axios

类的 PR。

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);
  },
  transformRequest: req => {
    return JSON.stringify(req);
  },
  headers: { 
    "Access-Control-Allow-Origin": "true",
    'Content-Type': 'application/json'
 },
});

export { axiosInstance };

免责声明：在进行此实现之前请仔细考虑，因为 99% 的 axios 默认配置、函数、帮助程序等不会附加到此实例，因此您必须像实例化 axiosService 时那样手动插入它们。但是，如果 axios 的所有内容对您来说并不重要，并且您想从头开始创建一个实例，甚至是一个在某些特定地方使用的基本实例，请随意这样做。所以大多数时候只需从“axios”导入axios并使用axios.create。