axios请求封装

import { useLoginStore } from '@/store/modules/login';
import axios, {AxiosInstance, AxiosError, AxiosRequestConfig, AxiosResponse} from 'axios'
import { storeToRefs } from 'pinia';
import { Toast } from 'vant';
import 'vant/es/toast/style';
import { clearCookie } from './jscookie';


declare const window: Window & { __wxjs_environment: any };

// 允许多个Toast存在
Toast.allowMultiple();
const loginStore = useLoginStore()

const {updateLogin} = loginStore


// 请求附带前缀   
const URL: string = import.meta.env.VITE_PROXY_URL
enum RequestEnums {
  TIMEOUT = 20000,
  OVERDUE = 1000 || 1005, // 登录失效
  FAIL = 999, // 请求失败
  SUCCESS = 0 || 200, // 请求成功
}
const config = {
  // 默认地址
  baseURL: URL as string,
  // 设置超时时间
  timeout: RequestEnums.TIMEOUT as number,
  // 跨域时候允许携带凭证
  withCredentials: true,
}

class RequestHttp {
  // 定义成员变量并指定类型
  service: AxiosInstance;
  
  public constructor(config: AxiosRequestConfig) {
    // 实例化axios
    this.service = axios.create(config);
    /**
     * 请求拦截器
     * 客户端发送请求 -> [请求拦截器] -> 服务器
     * token校验(JWT) : 接受服务器返回的token,存储到vuex/pinia/本地储存当中
     */
    this.service.interceptors.request.use(
      (config: AxiosRequestConfig) => {
        // 请求时提示用户加载中    给用户体验感觉很慢暂时注释掉
        // Toast.loading({
        //   message: '加载中...',
        //   // forbidClick: true,
        // });

        // 文件上传时所用的header头
        const uploadHeader = {"Content-Type":'multipart/form-data'}
        return {
          ...config,
          headers: {}
        }
      },
      (error: AxiosError) => {
        // 请求报错
        Promise.reject(error)
      }
    )

    /**
     * 响应拦截器
     * 服务器换返回信息 -> [拦截统一处理] -> 客户端获取到信息
     */
    this.service.interceptors.response.use(
      (response: AxiosResponse) => {
        // 接口请求成功清除提示
        // Toast.clear()
        const {data, config} = response; // 解构
        if (data.returnCode === RequestEnums.OVERDUE) {
          // 登录信息失效，应跳转到登录页面，并清空本地的token
          clearCookie()
          // 去除登录state 可以做一个跳转到登录页操作
          updateLogin(false)

          // Toast('未登录')
          
          // return Promise.reject(data);
        }
        // 全局错误信息拦截（防止下载文件得时候返回数据流，没有code，直接报错）
        if (data.returnCode && data.returnCode !== RequestEnums.SUCCESS) {
          // Toast(data.returnMsg); // 此处也可以使用组件提示报错信息
          // return Promise.reject(data)
        }
        return data;
      },
      (error: AxiosError) => {
        const {response} = error;
        if (response) {
          this.handleCode(response.status)
        }
        if (!window.navigator.onLine) {
          Toast('网络连接失败');
          // 可以跳转到错误页面，也可以不做操作
        }
      }
    )
  }
  handleCode(code: number):void {
   switch(code) {
    case 401:
     Toast('登录失败，请重新登录');
     break;
    default:
     Toast('数据显示失败,请稍后重试');
     break;
   }
  }

  // 常用方法封装
  get<T>(url: string, params?: object): Promise<ResultData<T>> {
   return this.service.get(url, {params});
  }
  post<T>(url: string, params?: object): Promise<ResultData<T>> {
   return this.service.post(url, params);
  }
  put<T>(url: string, params?: object): Promise<ResultData<T>> {
   return this.service.put(url, params);
  }
  delete<T>(url: string, params?: object): Promise<ResultData<T>> {
   return this.service.delete(url, {params});
  }
}

// 导出一个实例对象
export default new RequestHttp(config);