axios、axios二次封装、api解耦

import axios from 'axios'// 环境的切换切换测试与生产环境
if (process.env.NODE_ENV == 'development') {    axios.defaults.baseURL = '/api';
} else if (process.env.NODE_ENV == 'debug') {    axios.defaults.baseURL = '';
} else if (process.env.NODE_ENV == 'production') {    axios.defaults.baseURL = 'http://api.123dailu.com/';
}// 请求超时时间
axios.defaults.timeout = 10000;// post请求头
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';// 请求拦截器
axios.interceptors.request.use(    config => {// 每次发送请求之前判断是否存在token,如果存在,则统一在http请求的header都加上token,不用每次请求都手动添加了// 即使本地存在token,也有可能token是过期的,所以在响应拦截器中要对返回状态进行判断const token = store.state.token;        token && (config.headers.Authorization = token);        return config;    },    error => {        return Promise.error(error);    })// 响应拦截器
axios.interceptors.response.use(    response => {        if (response.status === 200) {            return Promise.resolve(response);        } else {            return Promise.reject(response);        }    },// 服务器状态码不是200的情况    error => {        if (error.response.status) {            switch (error.response.status) {                // 401: 未登录                // 未登录则跳转登录页面,并携带当前页面的路径                // 在登录成功后返回当前页面,这一步需要在登录页操作。                case 401:                    router.replace({                        path: '/login',                        query: { redirect: router.currentRoute.fullPath } });break;// 403 token过期                // 登录过期对用户进行提示                // 清除本地token和清空vuex中token对象                // 跳转登录页面                case 403:                     Toast({                        message: '登录过期,请重新登录',                        duration: 1000,                        forbidClick: true                    });                    // 清除token                    localStorage.removeItem('token');                    store.commit('loginSuccess', null);                    // 跳转登录页面,并将要浏览的页面fullPath传过去,登录成功后跳转需要访问的页面setTimeout(() => {                        router.replace({                            path: '/login',                            query: { redirect: router.currentRoute.fullPath }                        });                    }, 1000);                    break; // 404请求不存在                case 404:                    Toast({                        message: '网络请求不存在',                        duration: 1500,                        forbidClick: true                    });                    break;                // 其他错误,直接抛出错误提示                default:                    Toast({                        message: error.response.data.message,                        duration: 1500,                        forbidClick: true                    });            }            return Promise.reject(error.response);        }       }
);
/** * get方法,对应get请求 * @param {String} url [请求的url地址] * @param {Object} params [请求时携带的参数] */
export function get(url, params){    return new Promise((resolve, reject) =>{        axios.get(url, {            params: params        })        .then(res => {            resolve(res.data);        })        .catch(err => {            reject(err.data)        })    });
}
/** * post方法,对应post请求 * @param {String} url [请求的url地址] * @param {Object} params [请求时携带的参数] */
export function post(url, params) {    return new Promise((resolve, reject) => {         axios.post(url, QS.stringify(params))        .then(res => {            resolve(res.data);        })        .catch(err => {            reject(err.data)        })    });
}

响应拦截器可以对返回值进行封装

例如未封装前

getMenuData({id: xxxx,name: 'xxxx'}).then(response => {this.menu = response.data.list})

封装后

return response.data

 就可以这样写

getMenuData({id: xxxx,name: 'xxxx'}).then(response => {this.menu = response.list})

具体情况要看后端返回的字段 

然后就可以使用api

export function getMenuData(data) {return request({url: '/xxx/xxx/xxxx',   //接口urlmethod: 'post',  //根据后端的方式选择  请求类型data:data      
//data 是一个参数,它用来传递给 getMenuData 函数的数据。这个参数的具体含义取决于函数被调用时传递给它的值。在这个函数中,data 被用作一个对象,作为 HTTP 请求的数据参数传递给 request 函数。通常情况下,data 可能包含了需要发送给服务器的信息,比如用户输入的数据、配置信息等。})
}/*export function getMenuData(data) {return axios.request({url: '/api/xxx/getallgroup',method: 'post',data:data})
}*//*export function getMenuData() {return axios.post('/api/xxx/getallgroup', {id: 1,name: '统计信息类别名称'});
}*/

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/759439.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Kafka生产者相关概念

文章目录 Kafka工作流程Kafka文件存储生产者分区策略生产者ISR生产者ack机制数据一致性问题ExactlyOnce Kafka工作流程 Kafka中消息是以topic进行分类的,Producer生产消息,Consumer消费消息,都是面向topic的。 Topic是逻辑上的概念&#xff…

流畅的 Python 第二版(GPT 重译)(十)

第十八章:with、match 和 else 块 上下文管理器可能几乎与子例程本身一样重要。我们只是初步了解了它们。[…] Basic 有一个 with 语句,在许多语言中都有 with 语句。但它们的功能不同,它们都只是做一些非常浅显的事情,它们可以避…

C#实现贪吃蛇游戏

定义贪吃蛇和游戏逻辑 定义数据结构:创建一个类来表示贪吃蛇的每个部分(通常是一个具有X和Y坐标的结构体或类)。定义游戏状态:包括蛇的位置、方向、长度以及食物的位置。处理键盘输入:重写窗体的键盘事件处理函数&…

微服务day04(下) -- SpringAMQP

SpringAMQP SpringAMQP是基于RabbitMQ封装的一套模板,并且还利用SpringBoot对其实现了自动装配,使用起来非常方便。 SpringAmqp的官方地址:Spring AMQP SpringAMQP提供了三个功能: 自动声明队列、交换机及其绑定关系 基于注解的…

Macbook m1安装docker详细教程

下载安装包 进入官网 https://www.docker.com/ 下滑找到下载位置 下滑找到Mac对应安装包 等待下载完成即可。 安装 双击打开下载的安装包 将Docker拖到Applications中 安装完成后,找到安装的Docker 双击打开 点击accept同意 进入下面: 点fini…

隐私计算实训营学习二:隐私计算开源如何助力数据要素流通

文章目录 一、数据要素流转与数据内外循环二、数据外循环中的信任焦虑三、数据要素流通对隐私计算的期望四、隐私计算开源助力数据要素流通 一、数据要素流转与数据内外循环 数据要素流转过程(从数据采集加工->到数据价值释放): 链路主要包括采集、存储、加工、…

python与excel第二节

python与excel第二节 打开一个工作簿 例子: import xlwings as xw app xw.App(visibleTrue,add_bookFalse) workbook app.books.open(rD:\TEST\python与excel\工作簿test0.xlsx) 上面例子打开了工作簿test0.xlsx。 但是,如果该excel文件不存在则报错…

蓝桥杯单片机快速开发笔记——串口通信

一、原理分析 二、思维导图 三、示例框架 #include <STC15F2K60S2.H> #include "HC573.h"void UartInit(void) //9600bps12.000MHz {SCON 0x50; //8位数据,可变波特率AUXR | 0x01; //串口1选择定时器2为波特率发生器AUXR & 0xFB; //定时器时钟12T模式…

二阶低通滤波器

二阶低通滤波器可以使用不同的实现方法&#xff0c;包括直接型&#xff08;Direct Form I、II等&#xff09;、级联型等。在这里&#xff0c;我将为你提供一个直接型二阶低通滤波器的C#实现。这个滤波器通常具有以下的差分方程形式&#xff1a; y[n] b0 * x[n] b1 * x[n-1] …

Scala第十一章节(掌握模式匹配相关内容)

1.模式匹配 Scala中有一个非常强大的模式匹配机制&#xff0c;应用也非常广泛, 例如: 判断固定值类型查询快速获取数据 1.1 简单模式匹配 一个模式匹配包含了一系列备选项&#xff0c;每个备选项都开始于关键字 case。且每个备选项都包含了一个模式及一到多 个表达式。箭头…

应急响应靶机训练-Web3题解

前言 接上文&#xff0c;应急响应靶机训练-Web3。 前来挑战&#xff01;应急响应靶机训练-Web3 题解 首先登录用户administrator 寻找隐藏用户 找到隐藏用户hack6618$ 然后去找apache的日志文件 分析得出两个IP地址 192.168.75.129 192.168.75.130 然后更换hack6618$的…

Python 深度学习第二版(GPT 重译)(二)

四、入门神经网络&#xff1a;分类和回归 本章涵盖 您的第一个真实世界机器学习工作流示例 处理矢量数据上的分类问题 处理矢量数据上的连续回归问题 本章旨在帮助您开始使用神经网络解决实际问题。您将巩固从第二章和第三章中获得的知识&#xff0c;并将所学应用于三个新…

Flink RocksDB状态后端优化总结

截至当前&#xff0c;Flink 作业的状态后端仍然只有 Memory、FileSystem 和 RocksDB 三种可选&#xff0c;且 RocksDB 是状态数据量较大&#xff08;GB 到 TB 级别&#xff09;时的唯一选择。RocksDB 的性能发挥非常仰赖调优&#xff0c;如果全部采用默认配置&#xff0c;读写性…

sheng的学习笔记-AI-Inception network

目录&#xff1a;sheng的学习笔记-AI目录-CSDN博客 基础知识 构建卷积层时&#xff0c;你要决定过滤器的大小究竟是11&#xff08;原来是13&#xff0c;猜测为口误&#xff09;&#xff0c;33还是55&#xff0c;或者要不要添加池化层。而Inception网络的作用就是代替你来决定&…

智慧安全:守护智慧城市的安全屏障

随着信息技术的迅猛发展&#xff0c;智慧城市已成为现代城市发展的重要方向。智慧城市通过集成应用先进的信息通信技术&#xff0c;实现城市管理、服务、运行的智能化&#xff0c;为城市的可持续发展注入了新的活力。然而&#xff0c;在智慧城市的建设过程中&#xff0c;安全问…

在windows上安装Jenkins

jenkins安装 下载jenkins 官网&#xff1a;Jenkins download and deployment 官方文档说明&#xff1a;Jenkins User Documentation 安装jenkins1.点击下载好的安装包&#xff0c;点击Next 2.选择一个安装路径 如果系统是windows家庭版打不开策略就创建一个txt文件&#xff0c…

物联网的介绍

物联网&#xff08;Internet of Things&#xff0c;简称IoT&#xff09;是指通过互联网将物理设备、传感器、通信设备和软件系统相互连接&#xff0c;形成一个网络化的系统。它可以实现设备之间的数据交换、信息共享和远程控制&#xff0c;使得物理世界与数字世界紧密结合。 物…

漏洞发现-漏扫项目篇Poc开发Yaml语法反链判断不回显检测Yaml生成

知识点 1、Xray&Afrog-Poc开发-环境配置&编写流程 2、Xray-Poc开发-数据回显&RCE不回显&实验室 3、Afrog-Poc开发-数据回显&RCE不回显&JDNI注入 章节点&#xff1a; 漏洞发现-Web&框架组件&中间件&APP&小程序&系统 扫描项目-综合…

28-5 文件上传漏洞 - 图片马

一、文件内容检测 解析漏洞定义 控制文件是否被当做后端脚本处理 二、图片马绕过 图片马;在图片中包含一句话木马。利用解析漏洞如.htaccess 或文件包含漏洞,对图片马进行解析,执行其中的恶意代码。优势在于可以绕过多种防护机制。 三、图片马制作方法: # 一句话马示例…

数据结构与算法4-冒泡排序

文章目录 1. 认识冒泡排序2. 图示2.1 图示12.2 图示2 3. 代码 1. 认识冒泡排序 双层for循环&#xff0c;每次选出最大的数“浮”到数组的最后面&#xff1b;时间复杂度O( n 2 n^2 n2)&#xff0c;空间复杂度O(1);重复地遍历待排序的数列&#xff0c;一次比较两个元素&#xff…