Axios instance not callable from within custom class

[lekterable]

Describe the bug

Axios instance call doesn't return when called from within a custom class. I suspect it's related to the internal this keyword.

To Reproduce

The custom Axios class:

class Axios {
  #instance: AxiosInstance

  constructor({ baseURL }: Config) {
    this.#instance = axios.create({
      baseURL,
      headers: { 'Content-Type': 'application/json' },
    })

    this.#setupInterceptors()
  }

...

  async #interceptResponseError(
    error: AxiosError,
  ): Promise<AxiosError | AxiosResponse> {
    if (error.response.status === 401) {
      await refreshAuthorization()

      return await this.#instance(error.config) // This never returns
    }

    return await Promise.reject(error.response)
  }


}

export default Axios

Expected behavior

I would expect this code to work without errors and if it's necessary to use this internally I would somehow make it bound permanently so that it doesn't break when used with classes.

Environment

• Axios Version 0.26.1
• Adapter default
• Browser IOS Simulator
• Browser Version -
• Node.js Version 16.5.0
• OS: -
• Additional Library Versions: React 17.0.1, React Native 0.64.3

Additional context/Screenshots

I've confirmed that it's not a problem with my code by moving the const instance = axios.create outside of class and using this variable instead of this.#instance. It does make the code work, but it creates a monolith which I wanted to avoid.

[lekterable]

I think I managed to repro this on codesandbox:
https://codesandbox.io/s/optimistic-tdd-sipe0u?file=/src/index.ts

The expected output is:

[ERROR]
[RETRYING]
[ERROR]

but with the this.onResponseError uncommented it never logs the second [ERROR] after [RETRYING]