vue3.0 + vite + typescript, 简单的通过class类的方式进行二次封账axios

前言

刚写了一个关于此的项目移动端进行记录一下，哪里觉得写的不对的地方，希望各位大佬多提提宝贵的意见，废话不多说，上代码。

1、 新建文件 request.ts

//引入移动端 vant UI 框架引入提示方式
import { Toast, Dialog } from "vant";
//引入路由实现跳转
import Router from "@/router/index";
//引入axios，结构出相应的方法进行使用
import axios, {AxiosInstance, AxiosRequestConfig, AxiosResponse} from 'axios';

export class Request {
    public static axiosInstance: AxiosInstance;
    // 初始化
    public static init() {
        // 创建axios实例
        this.axiosInstance = axios.create({
            //  import.meta.env.VITE_BASE_API使用的是创建的  .env.development 文件和.env.production文件中，不同开发模式的接口取值， as string 将值替换成字符类型
            baseURL: import.meta.env.VITE_BASE_API as string,
            timeout: 50000,
        });
        // 初始化拦截器
        this.initInterceptors();
        return axios;
    };
    // 初始化拦截器
    public static initInterceptors() {
        // 设置post请求头
        this.axiosInstance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
        /**
         * 请求拦截器
         * 每次请求前，如果存在token则在请求头中携带token
         */
        this.axiosInstance.interceptors.request.use(
            (config?: AxiosRequestConfig<any>) => {
                let fig: any =  config;
                Toast.loading({ message: '请求中...', forbidClick: true, duration: 50000 });
                return config;
            },(error: any) => {
                Toast.clear();
                console.log(error);
            },
        );
        // 响应拦截器
        this.axiosInstance.interceptors.response.use(
            // 请求成功
            (response: AxiosResponse) => {
                if (response.status === 200) {
                    Toast.clear();
                    if(response.data.code === 0) {
                        return response.data;
                    } else {
                        Request.errorHandle(response.data);
                        return response.data;
                    }
                } else {
                    Toast.clear();
                    Request.errorHandle(response.data);
                    return response;
                };
            },
            // 请求失败
            (error: any) => {
                Toast.clear();
                const {response} = error;
                if (response) {
                    // 请求已发出，但是不在2xx的范围
                    Request.errorHandle(response);
                    return Promise.reject(response.data);
                } else {
                    Toast.fail('网络连接异常,请稍后再试!');
                };
            }
        );
    };
    /**
     * http握手错误
     * @param res 响应回调,根据不同响应进行不同操作
     */
    private static errorHandle(res: any) {
        // 状态码判断
        switch (res.code) {
            case 401:
                Dialog.confirm({
                    title: '系统提示',
                    message: '登录状态已过期，您可以继续留在该页面，或者重新登录'
                }).then( () => {
                    Router.push("/");
                })
            break;
            case 403: Toast.fail('当前操作无权限'); break;
            case 404: Toast.fail('请求的资源不存在'); break;
            case 500: Toast.fail(res.msg); break;
            case 502: Toast.fail("连接失败"); break;
            default: Toast.fail('连接错误');
        };
    };
};

2、配置统一访问路径，新建文件reqTools.ts文件。

// 引入存储缓存的方法
import Cookies from "./cookies";
// 引入配置好的axios
import { Request } from "./request";

// parameter: 请求参数，isToken 不传默认 true
const ReqTools = async (parameter: any, isToken: boolean = true) => {
	// 初始化请求
    Request.init();
    // 每次请求前，如果存在token则在请求头中携带token
    isToken ? parameter.headers = {'Authorization': 'Bearer ' + Cookies.get('token')} : {};
    return await Request.axiosInstance(parameter);
};

export default ReqTools;

3、编辑统一接口访问类，新建 api.ts 文件。

//引入axios封账
import { ReqTools } from './reqTools'

//方法抛出
export default class Apis {
	public static login (data: any)  {
	    return ReqTools({
	        url: '后端给的接口地址',
	        method: '请求方式，get,post,put 等',
	        params: data, // get传参方式
	        data,  // 简写，全写：data: data,  这是post 传参方式
	    }, false); // 不需要传token时， 添加 false
	};

}

3、组件中使用， login.vue

<script setup lang="ts">
    // 引入组件
    import Apis from "@/utils/api";
    // 登录事件
    const onSubmit = ():void => {
        //调用登录请求
        Apis.login({/** 参数 */}).then((response: any):void => { 
            //  写逻辑的地方 · · · 
        })
    };
</script>