The latest package of axios, solving the problem that the type AxiosRequestConfig cannot be assigned to InternalAxiosReqe; CreateAxiosDefaults cannot be assigned to AxiosRequestConfig

In the latest axios package, two issues may occur:

① Type CreateAxiosDefaults cannot be assigned to AxiosRequestConfig

Parameter of type ‘CreateAxiosDefaults ‘cannot be assigned to parameter of type’ AxiosRequestConfig ‘.
The types of property headers’ are incompatible.
Type “AxiosHeaders|” cannot be set Partial | Partial<RawAxiosHeaders&{Accept:
AxiosHeaderValue;”Content-Length”:AxiosHeaderValue;”User-Agent”:AxiosHeaderValue;”Content-
Encoding'”:AxiosHeaderValue;Authorization:AxiosHeaderValue;}&{..;}>| Undefined ‘Assigned to Type
“AxiosHeaders (PartialPartial<…>)undefined”.
Cannot assign type Partial P to type’ AxiosHeaders| ‘ (Partial<RawAxiosHeaders&{
Accept:AxiosHeaderValue;”Content-Length”:AxiosHeaderValue;”User-Agent”:AxiosHeaderValue;
“Content-Encoding”:AxiosHeaderValue;Authorization:AxiosHeaderValue;}{…;}>
Partial<…> undefined .”
Cannot assign type Partial to type Partial<RawAxiosHeaders&Accept:

By looking at the source code, we can see that the original type AxiosRequestConfig has changed to CreateAxiosDefaults. But CreateAxiosDefaults inherits AxiosRequestConfig.

 ②Type AxiosRequestConfig cannot be assigned to InternalAxiosRequestConfig

Parameter of type ‘config:AxiosRequestConfig ‘=>AxiosRequestConfig ‘cannot be assigned to type’ value: ‘
InternalAxiosRequestConfig)=>InternalAxiosRequestConfig
Parameter for Promise<InternalAxiosRequestConfig >’.
Cannot assign type “AxiosRequestConfig ‘to type” InternalAxiosRequestConfig

import axios from 'axios'
import type {
  AxiosInstance,
  AxiosRequestConfig,
  InternalAxiosRequestConfig,
  AxiosResponse
} from 'axios'

interface HYRequestInterceptors {
  requestInterceptor?: (
    config: InternalAxiosRequestConfig
  ) => InternalAxiosRequestConfig
  requestInterceptorCatch?: (error: any) => any
  responseInterceptor?: (res: AxiosResponse) => AxiosResponse
  responseInterceptorCatch?: (error: any) => any
}

interface HYRequestConfig extends AxiosRequestConfig {
  interceptors?: HYRequestInterceptors
}

class HYRequest {
  instance: AxiosInstance
  interceptors?: HYRequestInterceptors

  constructor(config: HYRequestConfig) {
    this.instance = axios.create(config)
    this.interceptors = config.interceptors

    this.instance.interceptors.request.use(
      this.interceptors?.requestInterceptor,
      this.interceptors?.requestInterceptorCatch
    )

    this.instance.interceptors.response.use(
      this.interceptors?.responseInterceptor,
      this.interceptors?.responseInterceptorCatch
    )
  }

  request(config: AxiosRequestConfig) {
    this.instance.request(config).then((res) => {
      console.log(res)
    })
  }
}

export default HYRequest 

Promise<InternalAxiosRequestConfig>”.
Type ‘AxiosRequestConfig ‘cannot be assigned to type’ InternalAxiosRequestConfig ‘.
Incompatible types for property headers.
Type “AxiosHeaders|” cannot be set (Partial<RawAxiosHeaders&{Accept:AxiosHeaderValue;”Content-
Length”:AxiosHeaderValue;”User-Agent”:AxiosHeaderValue;”Content-Encoding”:AxiosHeaderValue;
Authorization:AxiosHeaderValue;}&{…;}>&Partial<…>)| Undefined Assigned to Type
“AxiosRequestHeaders.”
Type undefined ‘cannot be assigned to type’ AxiosRequestHeaders’.
Cannot assign type undefined ‘to type “Partial<RawAxiosHeaders&Partial<RawAxiosHeaders&Accept:AxiosHeaderValue;

By viewing the source code, you can find that the latest type of request is InternalAxiosRequestConfig, and InternalAxiosRequestConfig inherits from AxiosRequestConfig.

The above two inherits, and the scope of the parent class is smaller than that of the child class.

Solution:

The change of the CreateAxiosDefaults type in the original axios.create has little effect, and its parent class AxiosRequestConfig continues to be used.

Where to change: When using the interceptor, use InternalAxiosRequestConfig instead of AxiosRequestConfig

The complete code is as follows:

import axios from 'axios'
import type {
  AxiosInstance,
  AxiosRequestConfig,
  InternalAxiosRequestConfig,
  AxiosResponse
} from 'axios'

interface HYRequestInterceptors {
  requestInterceptor?: (
    config: InternalAxiosRequestConfig
  ) => InternalAxiosRequestConfig
  requestInterceptorCatch?: (error: any) => any
  responseInterceptor?: (res: AxiosResponse) => AxiosResponse
  responseInterceptorCatch?: (error: any) => any
}

interface HYRequestConfig extends AxiosRequestConfig {
  interceptors?: HYRequestInterceptors
}

class HYRequest {
  instance: AxiosInstance
  interceptors?: HYRequestInterceptors

  constructor(config: HYRequestConfig) {
    this.instance = axios.create(config)
    this.interceptors = config.interceptors

    this.instance.interceptors.request.use(
      this.interceptors?.requestInterceptor,
      this.interceptors?.requestInterceptorCatch
    )

    this.instance.interceptors.response.use(
      this.interceptors?.responseInterceptor,
      this.interceptors?.responseInterceptorCatch
    )
  }

  request(config: AxiosRequestConfig) {
    this.instance.request(config).then((res) => {
      console.log(res)
    })
  }
}

export default HYRequest 

 After modular processing:

request/type.ts

import {
  InternalAxiosRequestConfig,
  AxiosResponse,
  AxiosRequestConfig
} from 'axios'
export interface HYRequestInterceptors {
  requestInterceptor?: (
    config: InternalAxiosRequestConfig
  ) => InternalAxiosRequestConfig
  requestInterceptorCatch?: (error: any) => any
  responseInterceptor?: (res: AxiosResponse) => AxiosResponse
  responseInterceptorCatch?: (error: any) => any
}

export interface HYRequestConfig extends AxiosRequestConfig {
  interceptors?: HYRequestInterceptors
} 

request/index.ts

import axios from 'axios'
import type { AxiosInstance, AxiosRequestConfig } from 'axios'
import type { HYRequestInterceptors, HYRequestConfig } from './type'

class HYRequest {
  instance: AxiosInstance
  interceptors?: HYRequestInterceptors

  constructor(config: HYRequestConfig) {
    this.instance = axios.create(config)
    this.interceptors = config.interceptors

    this.instance.interceptors.request.use(
      this.interceptors?.requestInterceptor,
      this.interceptors?.requestInterceptorCatch
    )

    this.instance.interceptors.response.use(
      this.interceptors?.responseInterceptor,
      this.interceptors?.responseInterceptorCatch
    )
  }

  request(config: AxiosRequestConfig) {
    this.instance.request(config).then((res) => {
      console.log(res)
    })
  }
}

export default HYRequest 

Use:

index.ts

// serviceunified export
import HYRequest from './request'
import { BASE_URL, TIME_OUT } from './request/config'

const hyRequest = new HYRequest({
  baseURL: BASE_URL,
  timeout: TIME_OUT,
  interceptors: {
    requestInterceptor: (config) => {
      console.log('Request successful interception')

      return config
    },
    requestInterceptorCatch: (err) => {
      console.log('Interception of failed requests')

      return err
    },
    responseInterceptor: (res) => {
      console.log('Request successful interception')

      return res
    },
    responseInterceptorCatch: (err) => {
      console.log('Response to successful interception')

      return err
    }
  }
})

export default hyRequest 

I can refer to other blogs for some of the interceptor writing methods.

This document is transferred from

import {
  InternalAxiosRequestConfig,
  AxiosResponse,
  AxiosRequestConfig
} from 'axios'
export interface HYRequestInterceptors {
  requestInterceptor?: (
    config: InternalAxiosRequestConfig
  ) => InternalAxiosRequestConfig
  requestInterceptorCatch?: (error: any) => any
  responseInterceptor?: (res: AxiosResponse) => AxiosResponse
  responseInterceptorCatch?: (error: any) => any
}

export interface HYRequestConfig extends AxiosRequestConfig {
  interceptors?: HYRequestInterceptors
}