在最新的axios封装中,可能会出现,以下两个问题:
通过查看源码我们可以发现 ,原来的类型AxiosRequestConfig已变成了CreateAxiosDefaults。但CreateAxiosDefaults又继承了AxiosRequestConfig。
类型“(config:AxiosRequestConfig<any>)=>AxiosRequestConfig<any>'的参数不能赋给类型“(value:
InternalAxiosRequestConfig<any>)=>InternalAxiosRequestConfig<any>
Promise<InternalAxiosRequestConfig<any>>'的参数。
不能将类型"AxiosRequestConfig<any>'分配给类型"InternalAxiosRequestConfig<any>
Promise<InternalAxiosRequestConfig<any>>".
不能将类型“AxiosRequestConfig<any>”分配给类型"InternalAxiosRequestConfig<any>”。
属性headers的类型不兼容。
不能将类型"AxiosHeaders|(Partial<RawAxiosHeaders&{Accept:AxiosHeaderValue;"Content-
Length":AxiosHeaderValue;"User-Agent":AxiosHeaderValue;"Content-Encoding":AxiosHeaderValue;
Authorization:AxiosHeaderValue;}&{...;}>&Partial<...>)|undefined分配给类型
"AxiosRequestHeaders”。
不能将类型undefined'分配给类型“AxiosRequestHeaders”。
不能将类型undefined'分配给类型"Partial<RawAxiosHeaders&{Accept:AxiosHeaderValue;
同理查看源码,可以发现request的最新类型为InternalAxiosRequestConfig,InternalAxiosRequestConfig又继承于AxiosRequestConfig。
以上两种继承,父类的作用范围是小于子类的
原先axios.create中CreateAxiosDefaults类型的改变影响不大,继续使用它的父类AxiosRequestConfig。
改变的地方:在使用拦截器时,使用InternalAxiosRequestConfig而不使用AxiosRequestConfig
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
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
因篇幅问题不能全部显示,请点此查看更多更全内容
怀疑对方AI换脸可以让对方摁鼻子 真人摁下去鼻子会变形
女子野生动物园下车狼悄悄靠近 后车司机按喇叭提醒
睡前玩8分钟手机身体兴奋1小时 还可能让你“变丑”
惊蛰为啥吃梨?倒春寒来不来就看惊蛰
男子高速犯困开智能驾驶出事故 60万刚买的奔驰严重损毁