先给拍一张结构图
最外层 index.ts统一出口
request文件夹中的 config.ts进行了baseurl和响应时间等基础配置
request文件夹中的index.ts就是我们主要的axios封装问加啦
最外层 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
})
export default hyRequest
request文件夹中的 config.ts
// 环境
let BASE_URL = ''
let TIME_OUT = 10000
if (process.env.NODE_ENV === 'development') {
BASE_URL = 'http://123.207.32.32:8000/'
}else if (process.env.NODE_ENV === 'production'){
BASE_URL = ''
} else {
BASE_URL = ''
}
export {BASE_URL, TIME_OUT}
request文件夹中的index.ts
import axios from 'axios'
import type {AxiosInstance,AxiosRequestConfig,AxiosResponse} from 'axios'
import { ElLoading } from 'element-plus';
import { ILoadingInstance } from 'element-plus/lib/el-loading/src/loading.type'
const DEAFULT_LOADING = true
// 定义接口,四个函数类型
interface HYRequestInterceptors<T = AxiosResponse> {
requestInterceptor?:(config:AxiosRequestConfig) => AxiosRequestConfig
requestInterceptorCatcher?:(error:any) => any
responseInterceptor?:(res:T) => T
responseInterceptorCatcher?:(error:any) => any
}
// 继承AxiosRequestConfig接口,增加HYRequestInterceptors接口类型
interface HYRequestConfig<T = AxiosResponse> extends AxiosRequestConfig {
interceptors?:HYRequestInterceptors<T>
showLoading?: boolean
}
// 使用class进行封装
class HYRequest{
instance:AxiosInstance
interceptors?:HYRequestInterceptors
showLoading: boolean
loading?:ILoadingInstance
// 构造器
constructor(config:HYRequestConfig){
// 创建axios实例
this.instance = axios.create(config)
// 保存基本信息
this.interceptors = config.interceptors
this.showLoading = config.showLoading ?? DEAFULT_LOADING
/**1.从config中取出的拦截器是对应实例的拦截器 */
// 使用请求拦截器
this.instance.interceptors.request.use(
this.interceptors?.requestInterceptor,
this.interceptors?.requestInterceptorCatcher
)
// 使用响应拦截器
this.instance.interceptors.response.use(
this.interceptors?.responseInterceptor,
this.interceptors?.responseInterceptorCatcher
)
/**2.添加所有实例都有的拦截器 */
this.instance.interceptors.request.use(
(config)=>{
if (this.showLoading) {
this.loading = ElLoading.service({
lock:true,
text:'正在加载中...',
background:'rgba(0,0,0,0.5)'
});
}
return config
},
(err)=>{
return err
}
)
this.instance.interceptors.response.use(
(res)=>{
// 讲loading移除
this.loading?.close();
return res.data
},
(err)=>{
// 讲loading移除
this.loading?.close();
return err
}
)
}
request<T>(config:HYRequestConfig<T>):Promise<T> {
return new Promise((resolve,reject) => {
// 单个请求对请求config的处理
if (config.interceptors?.requestInterceptor) {
config = config.interceptors.requestInterceptor(config)
}
// 判断是否需要显示loading
if (config.showLoading === false) {
this.showLoading = config.showLoading
}
this.instance
.request<any,T>(config)
.then((res) => {
// 1.单个请求对返回数据的处理
if (config.interceptors?.responseInterceptor) {
// res = config.interceptors.responseInterceptor(res)
}
// 2.将showLoading设置成true,这样不会影响到下一个请求
this.showLoading = DEAFULT_LOADING;
// 3.将结果resolve返回出去
resolve(res)
}).catch(err => {
// 将showLoading设置成true,这样不会影响到下一个请求
this.showLoading = DEAFULT_LOADING;
reject(err)
return err
})
})
}
post<T>(config:HYRequestConfig<T>):Promise<T> {
return this.request<T>({...config, method:'post'})
}
delete<T>(config:HYRequestConfig<T>):Promise<T> {
return this.request<T>({...config, method:'delete'})
}
patch<T>(config:HYRequestConfig<T>):Promise<T> {
return this.request<T>({...config, method:'patch'})
}
get<T>(config:HYRequestConfig<T>):Promise<T> {
return this.request<T>({...config, method:'get'})
}
}
export default HYRequest;