vue3 ts 跟 vue2 js 封装其实相差不打的,这种写法对于我这种刚学ts的来说刚刚好,可以解决大部分问题,如果说比较复杂的这种写法应该可以解决百分之七十的问题,可能会涉及到泛型,目前我也没掌握。
import axios from "axios" //第一步:导入axios
//定义类型
let loading: any;
//开启loading
function startLoading() {
//@ts-ignore
loading = ElLoading.service({
lock: true,
text: '拼命加载中....',
background: "rgba(0,0,0,0.7)",
})
}
//关闭loading
function endLoading() {
loading.close();
}
//第二步:创建axios实例
const service = axios.create({
// baseURL:env.prod.baseUrl,
timeout: 50000//超时时间
})
//第三步 请求拦截
service.interceptors.request.use((config) => {
// 在发送请求之前做些什么 验证token之类的
// console.log("请求的数据:", config);
if (sessionStorage.token) {
config.headers.Authorization = sessionStorage.token
}
//开启loading
startLoading();
return config;
}, (error) => {
//关闭loading
endLoading();
return Promise.reject(error)
}
)
//第四步 响应拦截
service.interceptors.response.use((response) => {
//关闭loading
endLoading();
return response
},
(error) => {
const { status } = error.response;
if (status == 401) {
//@ts-ignore
ElMessage.error("token过期啦,请重新登陆");
sessionStorage.removeItem('token')
//router.push("/login")
}
//关闭loading
endLoading();
//@ts-ignore
ElMessage.error(error.response.data.msg);
return Promise.reject(error);
}
)
export default service;
api 请求
import request from "./https"
export function register(data: any) {
return request({
url: '拼接的地址',
method:'',
data
})
}