axios的最新封装，办理范例AxiosRequestConfig不能赋值给InternalAxiosReqe
在最新的axios封装中，大概会出现，以下两个问题：① 范例CreateAxiosDefaults不能赋值给AxiosRequestConfig
范例"CreateAxiosDefaults<any>'的参数不能赋给范例“AxiosRequestConfig<any>”的参数。
属性headers'的范例不兼容。
不能将范例"AxiosHeaders|Partial<HeadersDefaults>|Partial<RawAxiosHeaders&{Accept:
AxiosHeaderValue;"Content-Length":AxiosHeaderValue;"User-Agent":AxiosHeaderValue;"Content-
Encoding'":AxiosHeaderValue;Authorization:AxiosHeaderValue;}&{..;}>|undefined'分配给范例
"AxiosHeaders (Partial<RawAxiosHeaders Accept:AxiosHeaderValue;"Content-Length":
AxiosHeaderValue;"User-Agent":AxiosHeaderValue;"Content-Encoding":AxiosHeaderValue;
Authorization:AxiosHeaderValue;}{...;}>Partial<...>)undefined".
不能将范例Partial<HeadersDefaults>P分配给范例“AxiosHeaders|(Partial<RawAxiosHeaders&{
Accept:AxiosHeaderValue;"Content-Length":AxiosHeaderValue;"User-Agent":AxiosHeaderValue;
"Content-Encoding":AxiosHeaderValue;Authorization:AxiosHeaderValue;}{...;}>
Partial<...>)undefined”。
不能将范例Partial<HeadersDefaults>”分配给范例Partial<RawAxiosHeaders&{Accept:
通过查察源码我们可以发现 ，原来的范例AxiosRequestConfig已变成了CreateAxiosDefaults。但CreateAxiosDefaults又继承了AxiosRequestConfig。
https://img-blog.csdnimg.cn/3466193587b44f3891f5cd2c3c2beab7.png
② 范例AxiosRequestConfig不能赋值给InternalAxiosRequestConfig
范例“(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。https://img-blog.csdnimg.cn/8a894203fe1244b5834c62d4473d99ad.png
以上两种继承，父类的作用范围是小于子类的
办理方法：
原先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
进行模块化处理后：
https://img-blog.csdnimg.cn/1d3b45de4e2c43ea8f5922596b386282.png
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
拦截器的种写法可以参考我其他博客，这里先不写了
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]