axios封装统一处理接口

最新推荐文章于 2024-05-18 15:09:49 发布
最新推荐文章于 2024-05-18 15:09:49 发布
阅读量7.3k 收藏 29
点赞数 8
分类专栏： vue 文章标签： vue vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zyg1515330502/article/details/112248072
版权

文件位置：

文件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

接口文件位置：

接口写法：

组件中引用：

小贵子的博客
关注
  • 8
    点赞
  • 踩
  • 29
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
axios封装接口思路
jie_ge_a的博客
10-07 393
vue封装接口思路 1.安装axios并引入 cnpm i axios --save 2.创建一个http.js文件 引入axios 封装get和post方法 以及开发及上线运用到的接口 还有一些请求超时 import axios from "axios" // 判断接口 如果是开发环境 接口就用http://120.53.31.103:84/开头 if (process.env.NODE_ENV == "development") { axios.defaults.baseURL =
axios封装与api接口管理
weixin_55103470的博客
06-03 178
我们为什么要封装axios和api接口管理？ 主要目的是为了让我们后期维护更加方便，同时简化我们的代码。 axios封装步骤 1.第一步我们先安装axios yarn add axios -S 2.第二步我们先在src目录中创建network文件夹，http.js文件中存放axios封装，api.js用来管理我们的接口 在http.js中我们首先引入 // 在http.js中引入axios import axios from 'axios'; // 引入axios import router from
Vue实现动态路由的两种方式总结
P_Jade的博客
03-22 1万+
实现动态路由有两种方式，一种是后端返回什么，前端就展示什么，另一种是后端只返回角色，前端根据角色拼接数据信息展示。相比第一种方式，第二种方式在企业中更常用。 第一种方式： （一）后端需返回类似Vue-router形式的json文件，如 [ {path:'/userlist',name:'userlist',title:'用户列表',component:'Userlist.vue'}, {path:'/role',name:'role',title:'角色管理',component:'Role.vu
Vuex的基本原理与使用
热门推荐
才华有限的博客
05-14 1万+
VueX的使用学习 参考文章添加链接描述 参考文章添加链接描述 我们需要知道 vue 是单向数据流的方式驱动的 什么是vuex? 为什么要使用vuex ? - 多个视图依赖于同一状态。 - 来自不同视图的行为需要变更同一状态。 vuex 类似Redux 的状态管理器, 用来管理Vue的所有组件状态 采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 ...
axios详解，基本使用与封装
最新发布
qq_63943166的博客
05-18 1913
什么是Axios 1. AJAX 2. jQuery的$.ajax方法 3. Axios 4. XMLHttpRequest 5. Fetch 6. 总结 Axios的基本使用 ts封装Axios 为什么封装axios 如何封装axios 使用
退出的功能
qq_35744728的博客
03-27 343
// 退出功能 logout() { // 调用确认对话框组件的实例方法 this.$confirm('你确定要离开吗?, 是否继续?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(async() => { // 使用 dispath 调用退出登录的方法 await this.$store.dispatch('user/userLo...
携带参数的退出功能
HQ\(^o^)/的博客
08-21 792
用户确定退出1. 首先看看接口文档有没有退出接口,有的话就调用(注意并不是所有的项目,都有退出接口)2. 退出接口成功调用之后清空本地用户信息(token、userInfo)3. 如果需要携带必要参数跳准备重新登录操作。
Vuex引入方法以及引入中出现的问题解决
Allurewuhui的博客
01-19 2158
小坑： Vuex的引入和注册不应该在main.js入口文件，而应该在vuex对应的配置文件 index.js中引入 Vuex配置方法 npm i vuex 下载 vuex包 与components文件夹平级，创建一个 store 文件夹，里面新建子文件 index.js import引入vuex Vue.use (vuex) 使用 Vuex 在index.js文件中配置vuex需要使用的属性，actions，mutations，state new一个Vuex的实例化对象 导出这个实例化对象
axios封装，使用拦截器统一处理接口，超详细的教程（推荐）.docx
01-18
3. 统一接口处理：本文档展示了如何使用axios库和拦截器来统一处理接口，这可以使得开发更加方便和高效。 4. 项目结构：本文档提供了一个完整的项目结构图，帮助读者更好地理解整个项目的架构。 5. axios.create...
axios封装，使用拦截器统一处理接口，超详细的教程（推荐）
10-17
主要介绍了axios封装使用拦截器处理接口，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
详解Vue中Axios封装API接口的思路及方法
10-14
在 Vue 中封装 Axios API 接口的主要目的是为了提高代码复用性和易维护性。以下是一个详细的封装过程： 1. **安装 Axios** 首先，需要在项目中安装 Axios。在命令行中执行 `npm install axios` 来添加 Axios 作为...
Vue+axios实现统一接口管理的方法
10-18
主要介绍了Vue+axios实现统一接口管理的方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
vue简单封装axios插件和接口的统一管理操作示例
10-15
在Vue项目中，为了实现高效的前端开发和维护，通常会进行axios插件的封装和接口的统一管理。本文将详细讲解如何在Vue中简单封装axios并实现接口的统一管理。 首先，我们需要安装axios插件。在项目根目录下，通过npm...
点击退出后登录还可以跳回到原来页面
weixin_46084100的博客
06-28 1047
点击退出后登录还可以跳回到原来页面
RuoYi-Vue————权限管理
周红伟讲AI
11-10 1859
RuoYi-Vue————权限管理 1. 若依框架权限分类 2. 若依框架权限的依次介绍 3. 若依框架重要接口执行流程 1. 若依框架权限分类 若依Vue系统中的权限分为以下几类： 1 菜单权限：用户登录系统之后能看到哪些菜单 2 按钮权限：用户在一个页面上能看到哪些按钮，比如新增、删除等按钮 3 接口权限：用户带着认证信息请求后端接口，是否有权限访问，该接口和前端页面上的按钮一一对应 4 数据权限：用户有权限访问后端某个接口，但是不同的用户相同的接口相同的入参，根据权限大小不同，返回的结果应当不一样—
Vue如何实现权限管理（动态路由addRoutes）
大雾起了清晨
04-22 4264
一、权限管理 权限管理就是让不同的用户只能访问自己权限内的资源，有以下几种 路由权限，用户登录后只能看到自己权限内的导航菜单，且只能访问自己权限内的路由地址 视图权限，用户只能看到自己权限内的内容和按钮 请求权限，越权请求将其拦截 二、控制权限 接口权限 按钮权限 菜单权限 路由权限
若依前后端分离版4、获取动态菜单路由
qq_45974926的博客
03-01 3110
若依前后端分离版4、获取动态菜单路由
vuex及store的基本用法
eisha2015的博客
04-15 1769
1. package.json 引入vuex npm install vuex // 或者 yarn add vuex 2. 在main.js同级目录下建一个store的文件夹，在store下新建一个index.js index.js内容： import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export def...
为什么import store from ‘./store‘和 ‘./store/index‘一样
思索的涟漪，突破自我
09-22 499
的文件（可以是JavaScript或TypeScript文件，取决于你的项目配置）。当你只导入目录路径时，默认会查找该目录下的。文件作为入口，所以即使你不写index它也会默认去找到index入口文件。这两种方式会导入相同的内容，因为在一个目录中，通常只会有一个。这种方式假定在当前文件所在目录下有一个名为。这种方式直接指定了要导入的文件路径为。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值