当前位置: 首页 > news >正文

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: '统计信息类别名称'});
}*/

相关文章:

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.…...

HTML 特殊元素:展示PDF、展示JSON 数据

<pre> 标签 (preformatted text) <pre> 标签用来表示预格式化的文本内容 在页面数据展示时&#xff0c;后端返回了一段未经处理的JSON 数据&#xff0c;将这段数据在页面正常展示&#xff0c;让可读性更高。 {/"project": {/ "title": "…...

算法·动态规划Dynamic Programming

很多人听到动态规划或者什么dp数组了&#xff0c;或者是做到一道关于动态规划的题目时&#xff0c;就会有一种他很难且不好解决的恐惧心理&#xff0c;但是如果我们从基础的题目开始深入挖掘动规思想&#xff0c;在后边遇到动态规划的难题时就迎难而解了。  其实不然&#xff…...

鸿蒙Harmony应用开发—ArkTS-转场动画(共享元素转场)

当路由进行切换时&#xff0c;可以通过设置组件的 sharedTransition 属性将该元素标记为共享元素并设置对应的共享元素转场动效。 说明&#xff1a; 从API Version 7开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容的起始版本。 属性 名称参数参数描述…...

【C语言】循环语句(语句使用建议)

文章目录 **while循环****while循环的实践****补充:if语句与while语句区别****for循环(使用频率最高)****for循环的实践****while循环和for循环的对比****Do-while循环****break和continue语句****循环的嵌套****goto语句(不常用)****循环语句的效率(来自于高质量的C/C编程书籍…...

Spring Data访问Elasticsearch----响应式Reactive存储库

Spring Data访问Elasticsearch----响应式Reactive存储库 一、用法二、配置 Reactive Elasticsearch存储库支持建立在存储库中解释的核心存储库支持之上&#xff0c;利用由 Reactive REST客户端执行的 Reactive Elasticsearch Operations提供的操作。 Spring Data Elasticsear…...

堆排序(c语言)

文章目录 前言一.什么是堆二.向下调整算法三.堆排序的创建总结 前言 堆排序&#xff08;Heapsort&#xff09;是指利用堆这种数据结构所设计的一种排序算法。堆积是一个近似完全二叉树的结构&#xff0c;并同时满足堆积的性质&#xff1a;即子结点的键值或索引总是小于&#x…...

开源IT自动化运维工具Ansible解析

Ansible 是一款开源的 IT 自动化工具&#xff0c;用于简化应用程序部署、配置管理、持续集成、基础设施即代码&#xff08;Infrastructure as Code, IaC&#xff09;和服务编排。它由 Michael DeHaan 创建&#xff0c;并在2012年首次发布&#xff0c;到2015年被红帽公司&#x…...

【C++】仿函数优先级队列反向迭代器

目录 一、优先级队列 1、priority_queue 的介绍 2、priority_queue 的使用 3、 priority_queue 的模拟实现 1&#xff09;priority_queue()/priority_queue(first, last) 2&#xff09;push&#xff08;x&#xff09; 3&#xff09;pop&#xff08;&#xff09; 4&#…...

UE4_调试工具_绘制调试球体

学习笔记&#xff0c;仅供参考&#xff01; 效果&#xff1a; 步骤&#xff1a; 睁开眼睛就是该变量在此蓝图的实例上可公开编辑。 勾选效果&#xff1a;...

机器人路径规划:基于冠豪猪优化算法(Crested Porcupine Optimizer,CPO)的机器人路径规划(提供MATLAB代码)

一、机器人路径规划介绍 移动机器人&#xff08;Mobile robot&#xff0c;MR&#xff09;的路径规划是 移动机器人研究的重要分支之&#xff0c;是对其进行控制的基础。根据环境信息的已知程度不同&#xff0c;路径规划分为基于环境信息已知的全局路径规划和基于环境信息未知或…...

探索.NET中的定时器:选择最适合你的应用场景

概述&#xff1a;.NET提供多种定时器&#xff0c;如 System.Windows.Forms.Timer适用于UI&#xff0c;System.Web.UI.Timer用于Web&#xff0c;System.Diagnostics.Timer用于性能监控&#xff0c;System.Threading.Timer和System.Timers.Timer用于一般定时任务。在.NET 6及以上…...

5467: 【搜索】流浪奶牛

题目描述 吃不到饭的奶牛Bessie一气之下决定离开农场&#xff0c;前往阿尔费茨山脉脚底下的农场&#xff08;听说那儿的草极其美味&#xff09;投靠她的亲戚Jimmy。但是前往目的地的山路崎岖&#xff0c;Bessie又没有吃饭&#xff0c;她需要尽量保存体力&#xff0c;以最轻松的…...

spring boot整合elasticsearch实现查询功能

第一步、添加依赖&#xff08;注意版本对应关系&#xff09;根据spring boot版本选择合适的版本 <dependency><groupId>org.elasticsearch</groupId><artifactId>elasticsearch</artifactId><version>7.6.2</version></dependenc…...

白嫖阿里云程序员日历

https://developer.aliyun.com/topic/lingma/activities/202403?taskCode14508&recordId44f3187f7950776f494eec668a62c65f#/?utm_contentm_fission_1 「通义灵码 体验 AI 编码&#xff0c;开 AI 盲盒」 打开链接直接领就行了...

ubuntu20.04搭建rtmp视频服务

1.安装软件 sudo apt-get install ffmpeg sudo apt-get install nginx sudo apt-get install libnginx-mod-rtmp 2.nginx配置 修改/etc/nginx/nginx.conf文件&#xff0c;在末尾添加&#xff1a; rtmp {server {listen 1935;application live {live on;}} } 3.视频测试 本…...

Request failed with status code 504,Gateway time out

问题描述&#xff1a; 部署在测试环境的项目在执行某功能时&#xff0c;后台程序在执行过程中&#xff0c;前端控制台在一分钟左右会报出Request failed with status code 504&#xff0c;Gateway time out异常。但是在本地开发环境会正常运行&#xff0c;并不会报出异常。 问题…...

四、Elasticsearch 进阶

自定义目录 4.1 核心概念4.1.1 索引&#xff08;Index&#xff09;4.1.2 类型&#xff08;Type&#xff09;4.1.3 文档&#xff08;Document&#xff09;4.1.3 字段&#xff08;Field&#xff09;4.1.5 映射&#xff08;Mapping&#xff09;4.1.6 分片&#xff08;Shards&#…...

海外云手机如何帮助亚马逊引流?

随着全球化的推进&#xff0c;出海企业和B2B外贸企业越来越注重海外市场的开拓&#xff0c;这已成为企业争夺市场份额的重要策略。本文将重点探讨海外云手机在优化亚马逊店铺引流方面的作用和优势。 海外云手机是一种在云端运行的虚拟手机&#xff0c;能够在单一芯片上多开几个…...

Gateway新一代网关

Gateway新一代网关 1、概述 ​ Cloud全家桶中有个很重要的组件就是网关&#xff0c;在1.x版本中都是采用的Zuul网关&#xff1b; ​ 但在2.x版本中&#xff0c;zuul的升级一直跳票&#xff0c;SpringCloud最后自己研发了一个网关SpringCloud Gateway替代Zuul。 ​ 官网&…...

DeepSeek系统设计辅助:如何在48小时内完成可审计、可回滚、可压测的AI服务架构图?

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;DeepSeek系统设计辅助 DeepSeek系统设计辅助模块面向架构师与后端工程师&#xff0c;提供模型能力调用、接口契约生成、异步任务编排等核心支撑能力。该模块不替代人工设计决策&#xff0c;而是通过结构…...

碧蓝航线自动化脚本终极指南:3小时学会全自动游戏管理

碧蓝航线自动化脚本终极指南&#xff1a;3小时学会全自动游戏管理 【免费下载链接】AzurLaneAutoScript Azur Lane bot (CN/EN/JP/TW) 碧蓝航线脚本 | 无缝委托科研&#xff0c;全自动大世界 项目地址: https://gitcode.com/gh_mirrors/az/AzurLaneAutoScript 还在为碧蓝…...

Spring Security OAuth2 /oauth/token 401原因与Content-Type规范

1. 问题现场还原&#xff1a;一个看似简单却让开发停摆两小时的/oauth/token请求刚接手一个老项目做安全加固&#xff0c;第一件事就是验证OAuth2密码模式的token获取流程。我照着文档写了一条curl命令&#xff1a;curl -X POST http://localhost:8080/oauth/token回车执行&…...

深度解析HS2-HF Patch:从技术框架到创作工具链的完整升级方案

深度解析HS2-HF Patch&#xff1a;从技术框架到创作工具链的完整升级方案 【免费下载链接】HS2-HF_Patch Automatically translate, uncensor and update HoneySelect2! 项目地址: https://gitcode.com/gh_mirrors/hs/HS2-HF_Patch 你是否曾因Honey Select 2的原版体验受…...

企业云盘签章技术方案:从数字签名原理到工程落地

背景 电子签章在企业云盘中的落地&#xff0c;不只是一个"上传盖章图片"的功能实现。本质上&#xff0c;它是一套涉及数字签名、PKI基础设施、文档完整性校验的综合性技术方案。本文从技术选型角度&#xff0c;说清楚企业云盘内置签章需要解决哪些问题、主流实现方案…...

约束感知图缩减算法在量子优化中的应用

1. 约束感知图缩减算法概述在量子计算领域&#xff0c;资源受限一直是制约算法实际应用的主要瓶颈。以当前主流的超导量子计算机为例&#xff0c;其量子比特数通常在50-100个之间&#xff0c;且存在显著的噪声干扰。这种硬件限制使得许多经典优化问题难以直接映射到量子设备上求…...

Redis 客户端连接详解

Redis 客户端连接详解 引言 Redis 是一款高性能的内存数据结构存储系统,常用于缓存、会话管理、实时排行榜等功能。客户端连接是 Redis 生态系统中的重要组成部分,本文将详细介绍 Redis 客户端连接的相关知识,包括连接方式、连接配置、连接管理等方面。 Redis 客户端连接…...

Burp抓包失败的五大隐形墙与HTTPS解密断裂点排查指南

1. 这不是Burp用得不对&#xff0c;是环境链路断在了你没看见的地方“Burp抓不到包”——这句话我过去三年里听开发、测试、刚转安全的新人说了不下两百遍。但真正打开Burp一看&#xff0c;Proxy标签页里空空如也&#xff0c;连个localhost:8080的请求都没有&#xff0c;十有八…...

5步彻底解决Windows DLL加载冲突:UE4SS系统故障排查指南

5步彻底解决Windows DLL加载冲突&#xff1a;UE4SS系统故障排查指南 【免费下载链接】RE-UE4SS Injectable LUA scripting system, SDK generator, live property editor and other dumping utilities for UE4/5 games 项目地址: https://gitcode.com/gh_mirrors/re/RE-UE4SS…...

Metabase:零代码 BI 数据可视化工具,自建数据看板

Metabase&#xff1a;零代码 BI 数据可视化工具&#xff0c;自建数据看板 在数据驱动决策的时代&#xff0c;能快速看到业务数据的变化趋势至关重要。然而&#xff0c;专业 BI 工具&#xff08;如 Tableau、Power BI&#xff09;价格昂贵&#xff0c;而让每个业务同学都学 SQL …...