import axios from 'axios';
import { showMessage } from './status' // 接口请求失败的状态码
import { ElMessage, ElLoading } from 'element-plus'

let loading: any = null
const loadingConfig = { // ElLoading 的加载动画
    lock: true,
    text: 'Loading',
    background: 'rgba(0, 0, 0, 0.7)'
}
console.log(localStorage.getItem("token"));

const service = axios.create({
    baseURL: import.meta.env.VITE_BASE_URL + '/', // url = base url + request url
    timeout: 600000,
    withCredentials: true, // send cookies when cross-domain requests
    // headers: {
    //     "Cache-Control": "no-cache",
    //     Pragma: "no-cache",
    // },
})
declare module "axios" {
    interface AxiosResponse<T = any> {
        errorinfo: null;
        // 这里追加你的参数
    }
    export function create(config?: AxiosRequestConfig): AxiosInstance;
}

const loadingWhiteList = ['/trade/pay/send/result/search'] // 请求白名单
// axios实例拦截请求
service.interceptors.request.use(
    config => {
        console.log("🚀 ~ file: index.ts:28 ~ config:", config)
        if (!loadingWhiteList.includes(config?.url ?? '')) {
            loading = ElLoading.service(loadingConfig)
        }
        // 在此处添加请求头等,如添加 token
        const token = localStorage.getItem("token");
        config.headers["Authorization"] = token ? "Bearer " + localStorage.getItem("token") : '';
        return config;
    },
    (error: any) => {
        loading.close()
        Promise.reject(error);
    }
)
// axios实例拦截响应
service.interceptors.response.use(
    (response: any) => {
        console.log(response, 'response');

        loading.close() // 关闭加载动画
        if (response.status === 200) {  // 如果请求连接成功
            if (response.data.code === 0 || response.config.responseType == 'blob'
            ) { // 如果请求的接口有返回数据
                return Promise.resolve(response.data);
            } else {
                ElMessage({
                    message: response.data.message,
                    type: 'error',
                })
                return Promise.reject(response.data);
            }
        } else {  // 请求失败 通过message 提示错误信息
            ElMessage({
                message: showMessage(response.status),
                type: 'error',
            })
            return Promise.reject(response);
        }
    },
    // 请求失败
    (error: any) => {
        loading.close()
        const { response } = error;
        if (response) {
            // 请求已发出,但是不在2xx的范围
            ElMessage({
                message: showMessage(response.status),
                type: 'error',
            })
            return Promise.reject(response.data);
        } else {
            ElMessage({
                message: '网络连接异常,请稍后再试!',
                type: 'error',
            })
        }
    }
);

export default service

status状态码

export const showMessage = (status: number | string): string => {
  let message: string = "";
  switch (status) {
    case 400:
      message = "请求错误(400)";
      break;
    case 401:
      message = "登录信息已过期,请重新登录(401)";
      break;
    case 403:
      message = "拒绝访问(403)";
      break;
    case 404:
      message = "请求出错(404)";
      break;
    case 408:
      message = "请求超时(408)";
      break;
    case 500:
      message = "服务器错误(500)";
      break;
    case 501:
      message = "服务未实现(501)";
      break;
    case 502:
      message = "网络错误(502)";
      break;
    case 503:
      message = "服务不可用(503)";
      break;
    case 504:
      message = "网络超时(504)";
      break;
    case 505:
      message = "HTTP版本不受支持(505)";
      break;
    default:
      message = `连接出错(${status})!`;
  }
  return `${message},请检查网络或联系管理员!`;
};

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐