使用es6类扩展Axios

jjjwad0x  于 2024-01-04  发布在  iOS
关注(0)|答案(6)|浏览(159)

我对创建一个API Package 器和使用es6类从axios扩展很感兴趣。这是怎么可能的呢?Axios有一个方法.create(),它允许你生成一个新的axios对象

  1. class Api extends Axios {
  2. constructor(...args){
  3. super(..args)
  4. this.defaults.baseURL = 'https://api.com'
  5. }
  6. cancelOrder (id) {
  7. return this.put(`/cancel/order/${id}`)
  8. }
  9. }

字符串
我知道我能拿到这个let instance = axios.create()
有什么想法吗?

尝试1

  1. import axios from 'axios'
  2. const Axios = axios.create()
  3. class Api extends Axios {
  4. constructor (...args) {
  5. super(...args)
  6. this.defaults.baseURL = 'https://api.com'
  7. }
  8. cancelOrder (id) {
  9. return this.put(`/cancel/order/${id}`)
  10. }
  11. }
  12. let api = new Api()
  13. api.cancelOrder('hi')
  14. .then(console.log)
  15. .catch(console.log)

尝试2

  1. import axios from 'axios'
  2. class Axios {
  3. constructor () {
  4. return axios.create()
  5. }
  6. }
  7. class Api extends Axios {
  8. constructor () {
  9. super()
  10. this.defaults.baseURL = 'https://api.com'
  11. }
  12. cancelOrder (id) {
  13. return this.put(`/cancel/order/${id}`)
  14. }
  15. }
  16. let api = new Api()
  17. console.log(api.__proto__)
  18. api.cancelOrder('hi')
  19. .then(console.log)
  20. .catch(console.log)

goucqfw6

goucqfw61#

axios当前不导出它在内部使用的Axios类。
.create()方法只示例化一个新示例。

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

字符串
我已经创建了一个导出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#

  1. import axios, { Axios } from 'axios';
  2. class Api extends Axios {
  3. constructor () {
  4. super()
  5. this.defaults.baseURL = 'https://api.com'
  6. }
  7. cancelOrder (id) {
  8. return this.put(`/cancel/order/${id}`)
  9. }
  10. }

字符串

ymzxtsji

ymzxtsji4#

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

13z8s7eq

13z8s7eq5#

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

  1. import axios from 'axios'
  2. export class Axios {
  3. constructor() {
  4. return axios.create({
  5. baseURL: 'http://127.0.0.1:8080/',
  6. headers: {
  7. Authorization: 'AUTH TOKEN FROM INSTANCE',
  8. 'Content-Type': 'application/json',
  9. },
  10. })
  11. }

字符串
}

  1. const db = new Axios()
  2. db.get('/your_url').then().catch()

展开查看全部
qyuhtwio

qyuhtwio6#

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

  1. import { Axios, AxiosRequestConfig } from "axios";
  2. class AxiosService<D = any> extends Axios {
  3. constructor(config?: AxiosRequestConfig<D>) {
  4. super(config);
  5. this.defaults.baseURL = 'https://api.com'
  6. this.interceptors.request.use(interceptorConfig => {
  7. // Set up your default interceptor behavior here for requests, if you want
  8. }
  9. );
  10. this.interceptors.response.use(
  11. response => {
  12. return response;
  13. },
  14. error => {
  15. // Same thing here, set the behavior for onError responses
  16. }
  17. );
  18. }
  19. cancelOrder (id) {
  20. return this.put(`/cancel/order/${id}`)
  21. }
  22. }
  23. /*
  24. Here you can choose between exporting the class or a instance of it
  25. in my case i just want to export the instance with some default config
  26. and use it, you may ask yourself why that's because i want to centrilize
  27. the configs on one axios instance instead of multiple instances.
  28. */
  29. const axiosInstance = new AxiosService({
  30. // You may want to set this so axios automatically parse your data to a object.
  31. transformResponse: res => {
  32. return JSON.parse(res);
  33. },
  34. transformRequest: req => {
  35. return JSON.stringify(req);
  36. },
  37. headers: {
  38. "Access-Control-Allow-Origin": "true",
  39. 'Content-Type': 'application/json'
  40. },
  41. });
  42. export { axiosInstance };

字符串
免责声明:在开始这个实现之前要想清楚,因为99%的axios默认的对象,函数,助手,etc不会被附加到这个示例,所以你必须像我们在示例化一个axiosService时那样手动插入它们。但是如果所有的axios东西对你来说都不重要,你想从头开始创建一个示例,或者甚至是一个在某些特定地方使用的基本示例,请随意。所以大多数时候只是从“axios”导入axios并使用axios. xml。

展开查看全部

相关问题