axios全局和请求拦截器封装(单独拦截器)
在传输时添加一个匹配的头就可以了。
·
目录
主要代码已打注释,总代码包含全局和单独请求拦截器。封装报错解释可参考其他文章
主要代码已打注释,总代码包含全局和单独请求拦截器。封装报错解释可参考其他文章
axios全局拦截器:
request/index
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
// 从config中取出的拦截器是对应的实例的拦截器
this.instance.interceptors.request.use(
this.interceptors?.requestInterceptor,
this.interceptors?.requestInterceptorCatch
)
this.instance.interceptors.response.use(
this.interceptors?.responseInterceptor,
this.interceptors?.responseInterceptorCatch
)
// 添加所有的实例都有的拦截器
this.instance.interceptors.request.use(
(config) => {
console.log('所有实例都有的拦截器:请求拦截成功')
return config
},
(err) => {
console.log('所有实例都有的拦截器:请求拦截失败')
return err
}
)
this.instance.interceptors.response.use(
(res) => {
console.log('所有实例都有的拦截器:响应成功拦截')
return res
},
(err) => {
console.log('所有实例都有的拦截器:响应失败拦截')
return err
}
)
}
request(config: AxiosRequestConfig) {
this.instance.request(config).then((res) => {
console.log(res)
})
}
}
export default HYRequest
request/type
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
}
单独拦截器:
刚开始因为InternalAxiosRequestConfig和AxiosRequestConfig类型请求头不匹配。在传输时添加一个匹配的头就可以了
总代码:
import axios from 'axios'
import type { AxiosInstance } 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
// 从config中取出的拦截器是对应的实例的拦截器
this.instance.interceptors.request.use(
this.interceptors?.requestInterceptor,
this.interceptors?.requestInterceptorCatch
)
this.instance.interceptors.response.use(
this.interceptors?.responseInterceptor,
this.interceptors?.responseInterceptorCatch
)
// 添加所有的实例都有的拦截器
this.instance.interceptors.request.use(
(config) => {
console.log('所有实例都有的拦截器:请求拦截成功')
return config
},
(err) => {
console.log('所有实例都有的拦截器:请求拦截失败')
return err
}
)
this.instance.interceptors.response.use(
(res) => {
console.log('所有实例都有的拦截器:响应成功拦截')
return res
},
(err) => {
console.log('所有实例都有的拦截器:响应失败拦截')
return err
}
)
}
request(config: HYRequestConfig) {
if (config.interceptors?.requestInterceptor) {
config = config.interceptors.requestInterceptor(config)
}
this.instance.request(config).then((res) => {
if (config.interceptors?.responseInterceptor) {
res = config.interceptors.responseInterceptor(res)
}
console.log(res)
})
}
}
export default HYRequest
更多推荐
已为社区贡献2条内容
所有评论(0)