Vue3通用请求响应拦截器与请求方法封装

文章目录

请求响应拦截器：

请求拦截器

向请求头中添加token

javascript 复制代码

import axios from 'axios'
import { getToken,removeToken } from '@/utils/cookie'
import { useUserStore } from "@/store/moudel/user.js";//保存在本地的数据
import modal from '@/plugins/modal.js'//引入Element Plus弹窗组件


// let { userInfo,userFlag } = storeToRefs(userStore);
// create an axios instance
const service = axios.create({
    baseURL: import.meta.env.VITE_APP_BASE_API,
    timeout: 36000 // request timeout
})

//请求拦截器
service.interceptors.request.use(

    config => {
        // 在请求发送之前，添加身份验证令牌（如果存在）
        let token = getToken()
        if (token != null) {
            config.headers.authentication = token
        }

        return config
    },
    error => {
    // 对请求错误进行处理
        console.log(error) 
        return Promise.reject(error)
    }
)

响应拦截器：

对响应数据进行处理

javascript 复制代码

// 响应拦截器
service.interceptors.response.use(
    (response) => {
        // 在接收到响应数据之前可以进行一些处理，例如解析响应数据、错误处理等
        // ...这里根据实际项目进行更改
        if (response.data.code === 0) {
            console.error(response.data.msg);
            modal.msgError(response.data.msg)
            return Promise.reject(response.data.msg);
        }else{
            return response.data
        }
    },
    (error) => {
        // 统一处理错误
        return handleRequestError(error)
    }
);

错误处理统一

这里错误弹窗用的是Element Plus的弹窗，需要提前引入Element Plus的项目配置

如有需要请见：http://t.csdnimg.cn/ZDOvB

javascript 复制代码

// 统一处理错误
const handleRequestError = (error) => {
    // 进行错误处理
    if (error.response) {
        // 服务器响应错误
        const userStore = useUserStore();
        let status = error.response.status
        // 在这里可以进行错误处理逻辑，例如弹出错误提示、记录错误日志等
        switch (status) {
            case 400:
                // 参数校验失败
                console.error('参数校验失败:', error.response.data.message);
                modal.msgError(error.response.data.message || '参数校验失败')
                return Promise.reject(error.response.data.message ?? '参数json解析失败');
            case 401:
                console.error('未授权:', error.response.data.message);
                modal.msgError(error.response.data.message || '账号已过期,请重新登录')
                removeToken()
                modal.msgError('登录状态已过期，请重新登录')
                sessionStorage.removeItem("user")
                userStore.setUserInfo(null)
                userStore.setLoginFlag(true)
                return Promise.reject({ error: '401', message: error.response.data.message });
            case 404:
                console.error('404:', error.response.data.message);
                modal.msgError(error.response.data.message || '资源不存在')
                return Promise.reject({ error: '接口不存在', message: error.response.data.message });
            case 500:
                console.error('服务器内部错误:', error.response.data.message);
                modal.msgError(error.response.data.message || '服务器内部错误')
                return Promise.reject({ error: '服务器内部错误', message: error.response.data.message });
            default:
                modal.msgError('服务器响应错误')
                console.error('服务器响应错误:', error.response.data);
        }

    } else if (error.request) {
        // 请求未收到响应
        console.error('请求未收到响应:', error.request);
        modal.msgError('请求未收到响应')
        // 在这里可以进行错误处理逻辑，例如弹出错误提示、记录错误日志等
    } else {
        // 请求配置出错
        console.error('请求配置出错:', error.message);
        modal.msgError('请求配置出错')
        // 在这里可以进行错误处理逻辑，例如弹出错误提示、记录错误日志等
    }
}


export default service

请求封装：

javascript 复制代码

// 封装请求方法
class AxiosService {
    constructor() {
        if (AxiosService.instance) {
            return AxiosService.instance;
        }
        AxiosService.instance = this;
    }

    // GET 请求
    get(url, params = null) {
        return instance.request({
            method: 'get',
            url,
            params,
        });
    }

    // POST 请求
    post(url, data = null, params = null, responseType) {
        return instance.request({
            method: 'post',
            url,
            data,
            params,
            responseType
        });
    }

    // PUT 请求
    put(url, data = null, params = null) {
        return instance.request({
            method: 'put',
            url,
            data,
            params,
        });
    }

    // DELETE 请求
    delete(url, params = null) {
        return instance.request({
            method: 'delete',
            url,
            params,
        });
    }
}

// 创建 AxiosService 实例
const axiosService = new AxiosService();

// 导出实例化后的 AxiosService 对象
export default axiosService;

封装后api的编写就可以得到大大优化

javascript 复制代码

import service from '../server'

// export const ArticleListOne = (data) => {
//     return service.get('/api/public/web/article/list', data)
// }

export const userPageList = (data) => {
    return service.post('/nskm/user/list', data)
}