在最新的axiOS封装中,可能会出现,以下两个问题: ① 类型CreateAxiosDefaults不能赋值给AxiosRequestConfig 类型"CreateAxiosDefaults'的参数不能赋给类型“AxiosReques
在最新的axiOS封装中,可能会出现,以下两个问题:
类型"CreateAxiosDefaults
'的参数不能赋给类型“AxiosRequestConfig ”的参数。
属性headers'的类型不兼容。
不能将类型"AxiosHeaders|Partial|Partial
AxiosHeaderValue;"Content-Length":AxiosHeaderValue;"User-Agent":AxiosHeaderValue;"Content-
Encoding'":AxiosHeaderValue;Authorization:AxiosHeaderValue;}&{..;}>|undefined'分配给类型
"AxiosHeaders (Partial
AxiosHeaderValue;"User-Agent":AxiosHeaderValue;"Content-Encoding":AxiosHeaderValue;
Authorization:AxiosHeaderValue;}{...;}>Partial<...>)undefined".
不能将类型PartialP分配给类型“AxiosHeaders|(Partial
Accept:AxiosHeaderValue;"Content-Length":AxiosHeaderValue;"User-Agent":AxiosHeaderValue;
"Content-Encoding":AxiosHeaderValue;Authorization:AxiosHeaderValue;}{...;}>
Partial<...>)undefined”。
不能将类型Partial”分配给类型Partial :
通过查看源码我们可以发现 ,原来的类型AxiosRequestConfig已变成了CreateAxiosDefaults。但CreateAxiosDefaults又继承了AxiosRequestConfig。
类型“(config:AxiosRequestConfig
)=>AxiosRequestConfig '的参数不能赋给类型“(value:
InternalAxiosRequestConfig)=>InternalAxiosRequestConfig
Promise>'的参数。
不能将类型"AxiosRequestConfig'分配给类型"InternalAxiosRequestConfig
Promise>".
不能将类型“AxiosRequestConfig”分配给类型"InternalAxiosRequestConfig ”。
属性headers的类型不兼容。
不能将类型"AxiosHeaders|(Partial
Length":AxiosHeaderValue;"User-Agent":AxiosHeaderValue;"Content-Encoding":AxiosHeaderValue;
Authorization:AxiosHeaderValue;}&{...;}>&Partial<...>)|undefined分配给类型
"AxiosRequestHeaders”。
不能将类型undefined'分配给类型“AxiosRequestHeaders”。
不能将类型undefined'分配给类型"Partial
同理查看源码,可以发现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
来源地址:https://blog.csdn.net/m0_60820509/article/details/132794307
--结束END--
本文标题: axios的最新封装,解决类型AxiosRequestConfig不能赋值给InternalAxiosReqe;CreateAxiosDefaults不能赋值给AxiosRequestConfig
本文链接: https://www.lsjlt.com/news/440196.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-21
2023-10-28
2023-10-28
2023-10-27
2023-10-27
2023-10-27
2023-10-27
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0