您的当前位置:首页正文

axios封装统一处理接口

2024-11-23 来源:个人技术集锦

文件位置:

文件request.js:

/****   request.js   ****/
import axios from 'axios'
import store from '@/store'
import router from "@/router";
import {
    projectUrl
} from "@/config/ssoUrl";
import {
    Loading,
    Message,
    MessageBox
} from "element-ui";
import {
    getCookie
} from '@/utils/cookie.js'
import {
    getToken,
    setToken,
    getUsername,
    removeUsername,
    removeToken,
    removeExpiresIn,
} from "@/utils/auth";
import {
    ssoLogOut
} from "@/api/common";

const errorMsg = (message) => {
    Message.closeAll();
    return Message({
        message: message,
        type: "error",
        duration: 3000,
    });
};

//配后端数据的接收方式application/json;charset=UTF-8或者application/x-www-form-urlencoded;charset=UTF-8
const contentType = "application/json;charset=UTF-8"

//1. 创建新的axios实例
const service = axios.create({
    // baseURL: location.origin + '/okr', // 公共接口-生产
    baseURL: location.origin + '/', // 公共接口-本地
    timeout: 30 * 1000, // 超时时间单位是ms
    headers: {
        "Content-Type": contentType,
    },
})

// 2.请求拦截器
service.interceptors.request.use(config => {
    //发请求前做的一些处理,数据转化,配置请求头,设置token,设置loading等,根据需求去添加
    config.data = JSON.stringify(config.data); //数据转化,也可以使用qs转换
    //注意使用token的时候需要引入cookie方法或者用本地localStorage等方法,推荐js-cookie
    const token = getCookie('Admin-Token'); //这里取token之前,需要先拿到token,存一下
    if (token) {
        // config.params = { 'token': token } //如果要求携带在参数中
        // config.headers.Authorization = '5fb94a47-0904-4368-819f-0d0c7f534a6a'; //如果要求携带在请求头中
        config.headers.Authorization = token; //如果要求携带在请求头中
    }
    config.headers.username = getUsername(); //如果要求携带在请求头中
    return config;
}, error => {
    return Promise.reject(error);
})

// 3.响应拦截器
service.interceptors.response.use(response => {
    const {
        data,
        config
    } = response;
    if (config.url.indexOf('auth/sso/login') == -1) {
        if (data.code !== 200) {

            // 判断如果是文件流-开始
            // console.log(response, typeof response.data);
            // if (response.data.type) {
            //     return response.data;
            // }
            // if (typeof response.data === "string") {
            //     return response.data;
            // }
            // 判断如果是文件流-结束

            switch (data.code) {
                case 1118: //登录失效code
                    if (window.location.origin == "https://okr.sk.com") {
                        MessageBox.confirm(
                            '登录状态已过期,是否重新登录?',
                            '系统提示', {
                                confirmButtonText: '确定',
                                cancelButtonText: '取消',
                                closeOnClickModal: false,
                                type: 'warning'
                            }
                        ).then(() => {
                            ssoLogOut(getToken())
                                .then((res) => {
                                    if (res.code === 200) {
                                        store.commit("SET_TOKEN", "");
                                        store.commit("SET_ROLES", []);
                                        store.commit("SET_PERMISSIONS", []);
                                        removeToken();
                                        sessionStorage.clear();
                                        localStorage.clear();
                                        location.href = projectUrl;

                                    } else {
                                        Message.error(res);
                                    }
                                })
                                .catch((err) => {
                                    Message.error(err);
                                    store.commit("SET_TOKEN", "");
                                    store.commit("SET_ROLES", []);
                                    store.commit("SET_PERMISSIONS", []);
                                    removeToken();
                                    sessionStorage.clear();
                                    localStorage.clear();
                                    location.href = projectUrl;
                                });

                        })
                    } else {
                        MessageBox.confirm(
                            '登录状态已过期,是否重新登录?',
                            '系统提示', {
                                confirmButtonText: '确定',
                                cancelButtonText: '取消',
                                closeOnClickModal: false,
                                type: 'warning'
                            }
                        ).then(() => {
                            store.dispatch('LogOut').then(() => {
                                location.reload() // 为了重新实例化vue-router对象 避免bug
                                router.push("/login");
                                sessionStorage.clear();
                                localStorage.clear();
                            })
                        })
                    }

                    break;
                case '401': //无权限code
                    router.push({
                        path: "/401",
                    });
                    break;
                case 13:
                    break
                case 14:
                    break
                default:
                    if (data.data == 1118) {
                        if (window.location.origin == "https://okr.sk.com") {
                            MessageBox.confirm(
                                '登录状态已过期,是否重新登录?',
                                '系统提示', {
                                    confirmButtonText: '确定',
                                    cancelButtonText: '取消',
                                    closeOnClickModal: false,
                                    type: 'warning'
                                }
                            ).then(() => {
                                ssoLogOut(getToken())
                                    .then((res) => {
                                        if (res.code === 200) {
                                            store.commit("SET_TOKEN", "");
                                            store.commit("SET_ROLES", []);
                                            store.commit("SET_PERMISSIONS", []);
                                            removeToken();
                                            sessionStorage.clear();
                                            localStorage.clear();
                                            location.href = projectUrl;

                                        } else {
                                            Message.error(res);
                                        }
                                    })
                                    .catch((err) => {
                                        Message.error(err);
                                        store.commit("SET_TOKEN", "");
                                        store.commit("SET_ROLES", []);
                                        store.commit("SET_PERMISSIONS", []);
                                        removeToken();
                                        sessionStorage.clear();
                                        localStorage.clear();
                                        location.href = projectUrl;
                                    });

                            })
                        } else {
                            MessageBox.confirm(
                                '登录状态已过期,是否重新登录?',
                                '系统提示', {
                                    confirmButtonText: '确定',
                                    cancelButtonText: '取消',
                                    closeOnClickModal: false,
                                    type: 'warning'
                                }
                            ).then(() => {
                                store.dispatch('LogOut').then(() => {
                                    location.reload() // 为了重新实例化vue-router对象 避免bug
                                    router.push("/login");
                                    sessionStorage.clear();
                                    localStorage.clear();
                                })
                            })
                        }

                    } else {
                        errorMsg(data.msg || `后端接口${data.code}异常`);
                    }

                    break;
            }

            return Promise.reject(
                "okr请求异常拦截:" +
                JSON.stringify({
                    url: config.url,
                    code: data.code,
                    data: data.data,
                    msg: data.msg,
                }) || "Error"
            );
        } else {
            return data;
        }
    } else {
        return data;
    }
}, error => {
    console.log(error)
    if (error && error.response) {
        // 1.公共错误处理
        // 2.根据响应码具体处理
        switch (error.response.status) {
            case 400:
                error.message = '错误请求'
                break;
            case 401:
                error.message = '未授权,请重新登录'
                break;
            case 403:
                error.message = '拒绝访问'
                break;
            case 404:
                error.message = '请求错误,未找到该资源'
                break;
            case 405:
                error.message = '请求方法未允许'
                break;
            case 408:
                error.message = '请求超时'
                break;
            case 500:
                error.message = '服务器端出错'
                break;
            case 501:
                error.message = '网络未实现'
                break;
            case 502:
                error.message = '网络错误'
                break;
            case 503:
                error.message = '服务不可用'
                break;
            case 504:
                error.message = '网络超时'
                break;
            case 505:
                error.message = 'http版本不支持该请求'
                break;
            default:
                error.message = `连接错误${error.response.status}`
                break;
        }
    } else {
        // 超时处理
        if (JSON.stringify(error).includes('timeout')) {
            Message.error('服务器响应超时,请刷新当前页')
        }
        Message.error('连接服务器失败')
    }

    Message.error(error.message);
    return Promise.reject(error);
})

//4.导出文件
export default service

接口文件位置:

接口写法:

组件中引用:

显示全文