vue3+typescript封装axios，并使全局实例出现代码提⽰⼀、class封装版
// 引⼊axios
import axios,{
AxiosInstance,
AxiosRespon,
Method,
ResponType,
AxiosRequestConfig,
AxiosError
}from'axios'
// 引⼊状态管理
import store from'@/store'
// 引⼊路由
import router from'@/router'
// 引⼊⾃定义⼯具
import{ path, sleep }from"@/utils/means"
// 引⼊qs
import qs from'qs'
// 引⼊封装的element-plus消息提⽰⼯具
import cue from'@/utils/cue'
export default class http {
private static axiosInstance: AxiosInstance
/
** 是否已经初始化 */
private static flag:boolean=fal
/**
* 初始化
* @returns
*/
private static init(){
if(this.flag)return
// console.log("初始化axios");
this.axiosInstance = ate({
a.env.VITE_RE_URL,
headers:{
'Content-Type':'application/json;chart=utf-8',
},
timeout:1000*30,
withCredentials:true,
})
this.initInterceptors()
this.flag =true
return axios
}
/**
* 初始化拦截器
*/
private static initInterceptors(){
// axios request 拦截器
this.quest.u(
(config: AxiosRequestConfig)=>{
//判断token是否存在
if(ken !=null){
//将token设置成请求头
(config as any).headers.Authorization = ken
}
return config
},
},
(error: AxiosError)=>{
ject(error)
}
)
// http respon 拦截器
this.spon.u((respon: AxiosRespon)=>{ // 只有 switch, 可⽤ return 直接结束返回
const res: IResult = respon.data
de){
ca401:{
<({
title:'认证失败',
message: res.msg ||'认证失败!请重试!'
})
break
}
ca402:{
router.push(path('/login'))
<({
title:'登录过期',
message: res.msg ||'登录信息已过期!请重新登录!'
})
// (res.msg)
break
}
ca403:{
<({
title:'权限验证',
message: res.msg ||'您没有该操作权限!⽆法进⾏该操作!'
})
/
/ (res.msg)
return respon
}
ca404:{
<({
title:'请求出错',
message: res.msg ||'不⽀持该请求⽅法!'
})
// (res.msg || '不⽀持该请求⽅法!')
break
}
温州乐园门票
ca405:{
<({
title:'重复请求',
message: res.msg ||'请勿重复请求!'
})
// (res.msg || '请勿重复请求!')
break
}
ca500:{
<({
title:'服务器故障',
message: res.msg ||'服务器故障!请重试!',
})
// (res.msg || '服务器故障，请重试')
break
}
default:
2016年日历return respon
}
},(error: AxiosError)=>{
ject(error)
})
}
}
/**
* 请求
* @param method ⽅法
* @param params 参数集合
*/
private static request(method: Method, params: IReqParameter){
const loading = cue.loading({
text:typeof params.loading =='string'? params.loading:undefined, visible: params.loading ?true:fal
})
params.timeout = params.timeout ||300
this.axiosInstance({
method: method,
url: params.url,
data: params.data,
responType: sType
}).then((respon: AxiosRespon)=>{
sleep(params.timeout).then(()=>{
loading.clo()
})
if(!respon)return
const res = respon.data
de ==0){
params.success?.(res)
}el de ==403){
params.unauthorized?.(res)
}el{
){
<(res)
}el{
<({
title:'错误提⽰',
message: res.msg ||'请求成功但发⽣错误，请检查!'
})
}
}
}).catch((error: AxiosError)=>{
sleep(params.timeout).then(()=>{
loading.clo()
})
// console.log(error)
const{ respon }= error
// 状态码判断
if(respon){
const res: IResult ={
code: respon.status,
msg: respon.statusText,
data: respon.data
}
switch(respon.status){
ca401:
break
ca403:
break
ca404:
res.msg ='请求的资源不存在'
<({
title:'请求出错',
message: res.msg,
遗憾作文})
break
default:
res.msg ='连接错误'
<({
title:'请求出错',
message: res.msg,
message: res.msg,
})
break
}
//?.(res)
}el{
<({
title:'请求出错',
message:'⽹络连接异常，请稍后再试!',
})
}
})
}
/**
* 执⾏请求
* @param method ⽅法
* @param params 参数集合
*/
private static executeReq=(method: Method, params: IReqParameter)=>{
this.init();
firm){
msg:firm =='string'? firm:'确定进⾏该操作？', ok:()=&quest(method, params)
})
}el{
}
}
/**
* get请求
* @param params 参数集合
刘秉忠
*/
public static get(params: IReqParameter){
if(params.data){
params.data = qs.stringify(JSON.par(JSON.stringify(params.data)))
params.url = params.url +"?"+ params.data
}
}
/**
* post请求
* @param params 参数集合
*/
public static post(params: IReqParameter){
}
/**
* put请求
* @param params 参数集合
*/
public static put(params: IReqParameter){
}
/**
* delete请求
* @param params 参数集合
*/
public static delete(params: IReqParameter){
}
/**
* ⾃定义请求
* @param method ⽅法金丝楠树
* @param params 参数集合
*/
*/
买椟还珠的意思是public static custom(params: IReqParameterCustom){ hod, params)
}
}
/**
* 后端返回的数据
* @key code 状态码
* @key data 数据
* @key msg 提⽰信息
* @key more 更多
*/
interface IResult {
code:number
data:any
国产青春msg:any
more?:any
}
/**
* 请求参数
* @key url 链接
* @key data 数据
* @key loading 是否开启 loading
* @key timeout loading持续时间
* @key confirm 是否需要confirm
* @key success 成功返回
* @key error 失败返回
* @key resType 返回类型
* @key unauthorized ⽆权限返回
*/
interface IReqParameter {
url:string
data?:any,
loading?:string|boolean
timeout?:number石泉
confirm?:string|boolean
success?:(res: IResult)=>void
error?:(err: IResult)=>void
resType?: ResponType
unauthorized?:(res: IResult)=>void
}
/**
* 请求参数
* @key method ⽅法
*/
interface IReqParameterCustom extends IReqParameter { method: Method
}
⼆、函数封装版
// 引⼊axios
import axios,{
AxiosRespon,
Method,
ResponType,
AxiosRequestConfig,
AxiosError
}from'axios'
/
/ 引⼊状态管理
import store from'@/store'
// 引⼊路由
import router from'@/router'
// 引⼊⾃定义⼯具
import{path, sleep}from"@/utils/means"
// 引⼊qs
