axios的最新封装，解决类型AxiosRequestConfig不能赋值给InternalAxiosReqe；CreateAxiosDefaults不能赋值给AxiosRequestConfig

在最新的axios封装中，可能会出现，以下两个问题：

① 类型CreateAxiosDefaults不能赋值给AxiosRequestConfig

类型"CreateAxiosDefaults'的参数不能赋给类型“AxiosRequestConfig”的参数。
属性headers'的类型不兼容。
不能将类型"AxiosHeaders|Partial|Partial|undefined'分配给类型
"AxiosHeaders (PartialPartial)undefined".
不能将类型PartialP分配给类型“AxiosHeaders|(Partial

Partial)undefined”。
不能将类型Partial”分配给类型PartialAxiosRequestConfig'的参数不能赋给类型“(value:
InternalAxiosRequestConfig)=>InternalAxiosRequestConfig
Promise'的参数。
不能将类型"AxiosRequestConfig'分配给类型"InternalAxiosRequestConfig
Promise".
不能将类型“AxiosRequestConfig”分配给类型"InternalAxiosRequestConfig”。
属性headers的类型不兼容。
不能将类型"AxiosHeaders|(Partial&Partial)|undefined分配给类型
"AxiosRequestHeaders”。
不能将类型undefined'分配给类型“AxiosRequestHeaders”。
不能将类型undefined'分配给类型"Partial 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

 进行模块化处理后：

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

使用：

  index.ts

// service统一出口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('请求成功的拦截')      return config    },    requestInterceptorCatch: (err) => {      console.log('请求失败的拦截')      return err    },    responseInterceptor: (res) => {      console.log('请求成功的拦截')      return res    },    responseInterceptorCatch: (err) => {      console.log('响应成功的拦截')      return err    }  }})export default hyRequest

拦截器的种写法可以参考我其他博客，这里先不写了