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

我还想创建允许我创建具有预定义默认值的多个实例的类。这是我的解决方法。

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 2

如果您查看source code的axios，他们似乎没有公开＆＃34;类＆＃34;对于Axios，只有一个实例。

我不相信可以在es6中扩展实例对象。

您的第二次尝试似乎最可行，但如果您想模拟每一个axios方法，那么可能会有很多开销。

Answer 3

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 4

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}`)
  }
}

使用es6类扩展Axios

4 个答案: