目录
http
---request
---type.ts
---index.ts
config.ts
index.ts
request
type.ts
import type { AxiosRequestConfig, AxiosResponse, InternalAxiosRequestConfig } from "axios"
export interface YRequestInterceptors<T = any> {
requestInterceptor?: (config: InternalAxiosRequestConfig<T>) => InternalAxiosRequestConfig<T>
requestInterceptorCatch?: (error: any) => any
responseInterceptor?: (config: AxiosResponse<T>) => AxiosResponse<T>
responseInterceptorCatch?: (error: any) => any
}
export interface YRequestConfig<T = any> extends AxiosRequestConfig {
showLoading?: boolean
interceptors?: YRequestInterceptors<T>
}
index.ts
import axios from "axios"
import NProgress from "nprogress"
import "nprogress/nprogress.css"
import type { AxiosInstance } from "axios"
import type { YRequestInterceptors, YRequestConfig } from "./type"
const DEAFULT_LOADING = true
class AxiosRequest {
private showLoading: boolean
private instance: AxiosInstance
interceptors?: YRequestInterceptors
constructor(config: YRequestConfig) {
this.instance = axios.create(config)
this.showLoading = config.showLoading ?? DEAFULT_LOADING
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
)
this.instance.interceptors.request.use(
(config) => {
if (this.showLoading) NProgress.start()
return config
},
(error) => {
return Promise.reject(error)
}
)
this.instance.interceptors.response.use(
(response) => {
NProgress.done()
// 关闭加载动画
return response
},
(err) => {
NProgress.done()
// 关闭加载动画
return Promise.reject(err)
}
)
}
request<T = any>(config: YRequestConfig<T>): Promise<T> {
return new Promise((resolve, reject) => {
this.instance
.request<T>(config)
.then((res) => {
// 必须 resolve(res.data) 不能resolve(res)
resolve(res.data)
return res
})
.catch((err) => {
reject(err)
})
})
}
get<T = any>(config: YRequestConfig<T>): Promise<T> {
return this.request<T>({ ...config, method: "GET" })
}
post<T = any>(config: YRequestConfig<T>): Promise<T> {
return this.request<T>({ ...config, method: "POST" })
}
delete<T = any>(config: YRequestConfig<T>): Promise<T> {
return this.request<T>({ ...config, method: "DELETE" })
}
patch<T = any>(config: YRequestConfig<T>): Promise<T> {
return this.request<T>({ ...config, method: "PATCH" })
}
put<T = any>(config: YRequestConfig<T>): Promise<T> {
return this.request<T>({ ...config, method: "PUT" })
}
}
export default AxiosRequest
config.ts
const BASE_URL = "/api"
const TIME_OUT = 2500
export { BASE_URL, TIME_OUT }
index.ts
import AxiosRequest from "./request"
import { BASE_URL, TIME_OUT } from "./config"
const request = new AxiosRequest({
baseURL: BASE_URL,
timeout: TIME_OUT,
showLoading: true,
interceptors: {
requestInterceptor: (config) => {
// if (token && config.headers) {
// config.headers["Authorization"] = token.value
// }
return config
},
requestInterceptorCatch: (err) => {
return err
},
responseInterceptor: (res) => {
return res
},
responseInterceptorCatch: (err) => {
return err
}
}
})
export default request
使用
from http import request
type userResult {
code:number
data:any
}
function getUserList():
return reuqet.get<userResult>()