vue3 + Ts 中 使用 class 封装 axios

vue3 + Ts 中 如何 封装 axios

1.安装 axios 和 Element-plus

yarn add axios
//  因为在请求中使用到了 loading
yarn add element-plus@2.2.12

在 request 文件中 创建 三个文件： type.ts 、 index.ts 、 config.ts
1.定义接口类型：创建 type.ts 文件

// 引入 axios 
import type { AxiosRequestConfig, AxiosResponse } from 'axios';

// 定义接口
export interface HRequestInterceptors<T = AxiosResponse> {
  // 请求拦截器（成功与失败）
  requestInterceptors?: (config: AxiosRequestConfig) => AxiosRequestConfig;
  requestInterceptorsCatch?: (error: any) => any;
  // 相应拦截器（成功与失败） 
  responseInterceptor?: (res: T) => T;
  responseInterceptorCatch?: (error: any) => any;
}
// 继承接口: 定义每个请求的拦截器并且设置请求状态显示
export interface HRequestConfig<T = AxiosResponse> extends AxiosRequestConfig {
  interceptors?: HRequestInterceptors<T>;
  // 是否展示请求加载状态
  showLoading?: boolean;
}

2.根据1 type 使用 class 封装axios

//  引入axios
import axios from 'axios';
import type { AxiosInstance } from 'axios';

// 引入类型
import type { HRequestInterceptors, HRequestConfig } from './type';
// 引入加载等待组件
import { ElLoading } from 'element-plus';
// 引入loading 类型：不同版本路劲不同
import { LoadingInstance } from 'element-plus/es/components/loading/src/loading';

// 请求加载显示状态
const DEFAULT_LOADING = false;
class HRequest {
 // 类型
  instance: AxiosInstance;
  interceptors?: HRequestInterceptors;
  showLoading: boolean;
  loading?: LoadingInstance;

  constructor(config: HRequestConfig) {
    // 创建请求
    this.instance = axios.create(config);

    // 保存基本信息
    this.interceptors = config.interceptors;

    this.showLoading = config.showLoading ?DEFAULT_LOADING;

    // 使用拦截器
    // 1.从config中获取的拦截器是对应的实例的拦截器
    this.instance.interceptors.request.use(
      this.interceptors?.requestInterceptors,
      this.interceptors?.requestInterceptorsCatch
    );

    // 响应拦截类型
    this.instance.interceptors.response.use(
      this.interceptors?.responseInterceptor,
      this.interceptors?.responseInterceptorCatch
    );

    // 2.所有示实例的请求拦截
    this.instance.interceptors.request.use(
      (config) => {
        if (this.showLoading) {
          this.loading = ElLoading.service({
            lock: true,
            text: '请求加载中...',
            background: 'rgba(255,255,255,0.5)'
          });
        }
        return config;
      },
      (err) => {
        return err;
      }
    );
    // 所有实例响应拦截
    this.instance.interceptors.response.use(
      (res) => {
        // 通过http的错误码
        // 服务器返回的status
        const data = res.data;
        // 清除loading
        this.loading?.close();
        if (data.returnCode === '-1001') {
          console.log('请求失败,错误信息');
        } else {
          return data;
        }
      },
      (err) => {
        // 4xx -> 5xx 在这里拦截
        if (err.response.status == 404) {
          console.log('404 的错误');
        }
        return err;
      }
    );
  }

  request<T>(config: HRequestConfig<T>): Promise<T> {
    return new Promise((resolve, reject) => {
      // 1. 单个请求的cofig 的处理
      if (config.interceptors?.requestInterceptors) {
        config = config.interceptors.requestInterceptors(config);
      }
      // 判断是否显示loading
      if (config.showLoading) {
        this.showLoading = config.showLoading;
      }
      this.instance
        .request<any, T>(config)
        .then((res) => {
          if (config.interceptors?.responseInterceptor) {
            res = config.interceptors.responseInterceptor(res);
          }
          // 不影响下一个loading 的使用
          this.showLoading = DEFAULT_LOADING;
          // 返回结果
          resolve(res);
        })
        .catch((err) => {
          // 不影响下一个loading 的使用
          this.showLoading = DEFAULT_LOADING;
          reject(err);
        });
    });
  }

  // 对request 二次封装
  get<T>(config: HRequestConfig<T>): Promise<T> {
    return this.request<T>({ ...config, method: 'GET' });
  }
  post<T>(config: HRequestConfig<T>): Promise<T> {
    return this.request<T>({ ...config, method: 'POST' });
  }
  put<T>(config: HRequestConfig<T>): Promise<T> {
    return this.request<T>({ ...config, method: 'PUT' });
  }
  delete<T>(config: HRequestConfig<T>): Promise<T> {
    return this.request<T>({ ...config, method: 'DELETE' });
  }
}
export default HRequest;

3.创建 config.ts 文件

// 根据相关开发环境进行获取 BASEURL
export const BASE_URL = process.env.VUE_APP_BASE_API;
// 请求等待时间
export const TIME_OUT = 1000;
// export { BASE_URL, TIME_OUT };

3.新建 serivce统一出口

import HRequest from './request';
// 
import { BASE_URL, TIME_OUT } from './request/config';

import localCache from '@/utils/cache';

// 携带参数
const hRequest = new HRequest({
  baseURL: BASE_URL,
  timeout: TIME_OUT,
  interceptors: {
    requestInterceptors: (config) => {
      //  获取token 根据 自己 对token存储 获取
      const token = localCache.getCache({ key: 'token' });
      if (token && config.headers) {
        config.headers.Authorization = `Bearer ${token}`;
      }
      return config;
    },
    requestInterceptorsCatch(error) {
      return error;
    },
    responseInterceptor: (res) => {
      return res;
    },
    responseInterceptorCatch(error) {
      return error;
    }
  }
});
export default hRequest;

5.最后定义请求接口 和 使用

import hRequest from '../index';

// 参数类型
interface IData {}
// 返回结果类型 
interface IResult{}

// url
enum LoginAPI {
  AccontLogin = '/login'
}

// 导出接口 showLoading：loading显示 ：默认情况下为不展示
export function accountLoginRequst(data:IData) {
  return hRequest.post<IResult>({
    url: LoginAPI.AccontLogin,
    data，
    showLoading: true
  });
}

// 使用
accountLoginRequst({userName:'admin',password:'123456'}).then(res=>{
  console.log(res)
})