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;}{...;}>artial<...>)undefined".
不能将范例Partial<HeadersDefaults>分配给范例“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。

 ② 范例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;}&{...;}>&artial<...>)|undefined分配给范例
"AxiosRequestHeaders”。
不能将范例undefined'分配给范例“AxiosRequestHeaders”。
不能将范例undefined'分配给范例"artial<RawAxiosHeaders&{Accept:AxiosHeaderValue;
   同理查察源码，可以发现request的最新范例为InternalAxiosRequestConfig，InternalAxiosRequestConfig又继承于AxiosRequestConfig。

以上两种继承，父类的作用范围是小于子类的
办理方法：

原先axios.create中CreateAxiosDefaults范例的改变影响不大，继承使用它的父类AxiosRequestConfig。
改变的地方：在使用拦截器时，使用InternalAxiosRequestConfig而不使用AxiosRequestConfig
完整代码如下：

1. import axios from 'axios'
2. import type {
3.   AxiosInstance,
4.   AxiosRequestConfig,
5.   InternalAxiosRequestConfig,
6.   AxiosResponse
7. } from 'axios'
9. interface HYRequestInterceptors {
10.   requestInterceptor?: (
11.     config: InternalAxiosRequestConfig
12.   ) => InternalAxiosRequestConfig
13.   requestInterceptorCatch?: (error: any) => any
14.   responseInterceptor?: (res: AxiosResponse) => AxiosResponse
15.   responseInterceptorCatch?: (error: any) => any
16. }
18. interface HYRequestConfig extends AxiosRequestConfig {
19.   interceptors?: HYRequestInterceptors
20. }
22. class HYRequest {
23.   instance: AxiosInstance
24.   interceptors?: HYRequestInterceptors
26.   constructor(config: HYRequestConfig) {
27.     this.instance = axios.create(config)
28.     this.interceptors = config.interceptors
30.     this.instance.interceptors.request.use(
31.       this.interceptors?.requestInterceptor,
32.       this.interceptors?.requestInterceptorCatch
33.     )
35.     this.instance.interceptors.response.use(
36.       this.interceptors?.responseInterceptor,
37.       this.interceptors?.responseInterceptorCatch
38.     )
39.   }
41.   request(config: AxiosRequestConfig) {
42.     this.instance.request(config).then((res) => {
43.       console.log(res)
44.     })
45.   }
46. }
48. export default HYRequest

复制代码

 进行模块化处理后：

request/type.ts

1. import {
2.   InternalAxiosRequestConfig,
3.   AxiosResponse,
4.   AxiosRequestConfig
5. } from 'axios'
6. export interface HYRequestInterceptors {
7.   requestInterceptor?: (
8.     config: InternalAxiosRequestConfig
9.   ) => InternalAxiosRequestConfig
10.   requestInterceptorCatch?: (error: any) => any
11.   responseInterceptor?: (res: AxiosResponse) => AxiosResponse
12.   responseInterceptorCatch?: (error: any) => any
13. }
15. export interface HYRequestConfig extends AxiosRequestConfig {
16.   interceptors?: HYRequestInterceptors
17. }

复制代码

 request/index.ts

1. import axios from 'axios'
2. import type { AxiosInstance, AxiosRequestConfig } from 'axios'
3. import type { HYRequestInterceptors, HYRequestConfig } from './type'
5. class HYRequest {
6.   instance: AxiosInstance
7.   interceptors?: HYRequestInterceptors
9.   constructor(config: HYRequestConfig) {
10.     this.instance = axios.create(config)
11.     this.interceptors = config.interceptors
13.     this.instance.interceptors.request.use(
14.       this.interceptors?.requestInterceptor,
15.       this.interceptors?.requestInterceptorCatch
16.     )
18.     this.instance.interceptors.response.use(
19.       this.interceptors?.responseInterceptor,
20.       this.interceptors?.responseInterceptorCatch
21.     )
22.   }
24.   request(config: AxiosRequestConfig) {
25.     this.instance.request(config).then((res) => {
26.       console.log(res)
27.     })
28.   }
29. }
31. export default HYRequest

复制代码

使用：
  index.ts

1. // service统一出口
2. import HYRequest from './request'
3. import { BASE_URL, TIME_OUT } from './request/config'
5. const hyRequest = new HYRequest({
6.   baseURL: BASE_URL,
7.   timeout: TIME_OUT,
8.   interceptors: {
9.     requestInterceptor: (config) => {
10.       console.log('请求成功的拦截')
12.       return config
13.     },
14.     requestInterceptorCatch: (err) => {
15.       console.log('请求失败的拦截')
17.       return err
18.     },
19.     responseInterceptor: (res) => {
20.       console.log('请求成功的拦截')
22.       return res
23.     },
24.     responseInterceptorCatch: (err) => {
25.       console.log('响应成功的拦截')
27.       return err
28.     }
29.   }
30. })
32. export default hyRequest

复制代码

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


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。