import axios, { AxiosRequestConfig } from "axios"; import { showLoadingToast, closeToast, showFailToast } from 'vant'; import { useCookies } from '@vueuse/integrations/useCookies'; const { VITE_TOKEN_KEY } = import.meta.env; const token = useCookies().get(VITE_TOKEN_KEY as string); interface ResponseData { code: number; message: string; data: T; } let loadingCount = 0 const MODE = import.meta.env.MODE; // 环境变量 console.log("MODE: ", MODE); const service = axios.create({ // 开发环境请求本地代理,生产环境请求域名 // 开发环境在接口面前自动加上 api,配合 本地代理使用,无需在每个接口前写 /api // baseURL: MODE === "development" ? "/service" : "http://ab.svip52.com/api", headers: { "X-Requested-With": "XMLHttpRequest", "Content-Type": "application/json", }, }); // 两层泛型,一层是 axios 提供的,AxiosRequestConfig // 一层是自定义的,ResponseData // 实现响应的 data 以及 data.data 的类型提示 // request 函数传入一个 data.data 的类型 const request = async ( config: AxiosRequestConfig ): Promise> => { // 请求前加上 token service.interceptors.request.use((config) => { addToast() if (config?.headers) { config.headers.wxOpenId = token || ""; } return config; }); //response拦截器 service.interceptors.response.use( response => { reduce() return response; }, error => { reduce() return Promise.reject(error) } ); const { data } = await service.request>(config); // 请求失败 console.log('request',data) // reduce() if (typeof data !== "object") { showFailToast({ message:'服务器错误,请联系管理员', icon: 'warning-o', }); return Promise.reject(data); } if (data.code != 200) { if (data.message) showFailToast({ message:data.message, icon: 'warning-o', }); // 401,token 过期 if (data.code == 401) { localStorage.removeItem("token"); location.href = "#/login"; } return Promise.reject(data); } return data; }; function addToast(){ showLoadingToast({ message: '加载中...', forbidClick: true, duration: 0, }); loadingCount++ } function reduce(){ loadingCount-- if (loadingCount == 0) { closeToast() } } export default request;