vue3封装

最新推荐文章于 2024-10-09 13:32:08 发布

隔壁的程序员大表哥

最新推荐文章于 2024-10-09 13:32:08 发布

阅读量182

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_70024734/article/details/132773529

版权

文章介绍了如何使用Axios进行HTTP请求，包括基础配置、请求和响应拦截器的实现，以及处理登录超时、错误码的情况。还展示了如何封装通用的HTTP操作方法和在实际场景中的使用示例。

摘要由CSDN通过智能技术生成

俩个js文件 request和index

request


import axios, { AxiosInstance, AxiosError, AxiosRequestConfig, AxiosResponse } from "axios";
import { ElMessage, ElLoading, ElMessageBox } from "element-plus";


// response interface { code, msg, success }
// 不含 data
interface Result {
    code: number,
    success: boolean,
    msg: string
}


// request interface，包含 data
interface ResultData<T = any> extends Result {
    data?: T
}


enum RequestEnums {
    TIMEOUT = 10000, // 请求超时 request timeout
    FAIL = 500, // 服务器异常 server error
    LOGINTIMEOUT = 401, // 登录超时 login timeout
    SUCCESS = 200, // 请求成功 request successfully
}


// axios 基础配置
const config = {
    // 默认地址，可以使用 process Node内置的，项目根目录下新建 .env.development
    baseURL: "http://community.byesame.com",
    timeout: RequestEnums.TIMEOUT as number, // 请求超时时间
    // withCredentials: true, // 跨越的时候允许携带凭证
}


class Request {
    service: AxiosInstance;

    constructor(config: AxiosRequestConfig) {
        // 实例化 serice
        this.service = axios.create(config);

        /**
         * 请求拦截器
         * request -> { 请求拦截器 } -> server
         */
        this.service.interceptors.request.use(
            // config: AxiosRequestConfig 这里报错使用config:any
            (config: any) => {
                const token = localStorage.getItem('token') ?? '';
                return {
                    ...config,
                    headers: {
                        'customToken': "customBearer " + token
                    }
                }
            },
            (error: AxiosError) => {
                // 请求报错
                Promise.reject(error)
            }
        );


        /**
         * 响应拦截器
         * response -> { 响应拦截器 } -> client
         */
        this.service.interceptors.response.use(
            (response: AxiosResponse) => {
                const { data, config } = response;
                if (data.code === RequestEnums.LOGINTIMEOUT) {
                    // 表示登录过期，需要重定向至登录页面
                    ElMessageBox.alert("Session expired", "System info", {
                        confirmButtonText: 'Relogin',
                        type: 'warning'
                    }).then(() => {
                        // 或者调用 logout 方法去处理
                        localStorage.setItem('token', '');
                        location.href = '/'
                    })
                }
                if (data.code && data.code !== RequestEnums.SUCCESS) {
                    ElMessage.error(data);
                    return Promise.reject(data);
                }
                return data
            },
            (error: AxiosError) => {
                const { response } = error;
                if (response) {
                    this.handleCode(response.status);
                }
                if (!window.navigator.onLine) {
                    ElMessage.error("网络连接失败，请检查网络");
                    // 可以重定向至404页面
                }
            }

        )
    }

    public handleCode = (code: number): void => {
        switch (code) {
            case 401:
                ElMessage.error("登陆失败，请重新登录");
                break;
            case 500:
                ElMessage.error("请求异常，请联系管理员");
                break;
            default:
                ElMessage.error('请求失败');
                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 Request(config)

index

import request from "@/utils/request";
//用户数量
export const getUserNum = (params: any) => {
    return request.get('/users/getUsersData?currPage=0&pageNum=4', params);
}

使用

import { getLoginData, delLoginData } from '../../utils/index'

function getData() {
  getLoginData({
    username: formInline.user,
   传的值
  }).then((res: any) => {
    console.log(res)
    total.value = res.total
    tableData.value = res.data
  })
}