使用es6类扩展Axios

jjjwad0x  于 2023-11-18  发布在  iOS
关注(0)|答案(6)|浏览(138)

我对创建一个API Package 器和使用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)

goucqfw6

goucqfw61#

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

gopyfrb3

gopyfrb32#

如果你看一下axiossource code,它们似乎没有公开Axios的“类”,只是一个示例。
我不相信示例对象可以在es6中扩展。
您的第二次尝试似乎是最可行的,但是如果您想模拟每一个axios方法,您可能会有很多开销。

jutyujz0

jutyujz03#

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

字符串

ymzxtsji

ymzxtsji4#

你可以安装这个软件包:npm i axios-es6-class

13z8s7eq

13z8s7eq5#

我还想创建一个类,它允许我创建多个具有预定义默认值的示例。

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()

qyuhtwio

qyuhtwio6#

好吧,许多答案都说没有类“Axios”从axios包导出,但至少在0.26.0版本中不是这样的。如果你想自己创建Axios示例并根据自己的意愿定制它,这很简单。我使用typescript创建了一个示例,如果你愿意,可以随意使用它。

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默认的对象,函数,助手,etc不会被附加到这个示例,所以你必须像我们在示例化一个axiosService时那样手动插入它们。但是如果所有的axios东西对你来说都不重要,你想从头开始创建一个示例,或者甚至是一个在某些特定地方使用的基本示例,请随意。所以大多数时候只是从“axios”导入axios并使用axios. xml。

相关问题