/src/utils/request.ts：axios 请求封装，适用于需要统一处理请求和响应的场景

文章目录

      • 数据结构解释
      • 1. 核心功能
      • 2. 代码结构分析
        • 请求拦截器
        • 响应拦截器
      • 3. 改进建议
      • 4. 总结

console.log('Intercepted Response:', JSON.stringify(response));

{"data": {"code": 0,"msg": "成功","data": {"id": 76,"inviteCode": "957989","invitorId": 56,"remark": "测试","generatedDate": "2025-01-08T16:55:27.163","expireTime": "2025-01-15T16:55:27.163","inviteLevel": 2,"status": 0,"boundPhone": null,"weixinNickname": null,"weixinHeadimg": null,"boundWxUid": null,"adminId": null,"userId": null,"isLocked": 0,"createdDate": "2025-01-08T16:55:27.163","lastModifiedDate": "2025-01-08T16:55:27.163"}},"status": 200,"statusText": "","headers": {"cache-control": "no-cache, no-store, max-age=0, must-revalidate","content-type": "application/json;charset=UTF-8","expires": "0","pragma": "no-cache"},"config": {"url": "/api/invite-codes/generate","method": "post","params": {"invitorId": 56,"remark": "测试"},"headers": {"Accept": "application/json, text/plain, */*","token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJhdWQiOiI1NiIsInJvbGUiOiJST0xFX0NPTVBBTllfU1VQRVIiLCJleHAiOjE3MzY0MDA5MDMsInVzZXJOYW1lIjoiMTg2NjE5Nzc1ODEiLCJ0eXBlIjoiYWRtaW4iLCJpYXQiOjE3MzYzMTQ1MDN9.OBFnxtoE4A2RO6gAcVm_CUkvJl_j6wpUkOPZOZySwEk"},"baseURL": "http://127.0.0.1:8087/","transformRequest": [null],"transformResponse": [null],"timeout": 0,"withCredentials": false,"xsrfCookieName": "XSRF-TOKEN","xsrfHeaderName": "X-XSRF-TOKEN","maxContentLength": -1},"request": {}
}

数据结构解释

  • data: 包含实际业务响应数据，其中：
    • code: 响应码，0 表示成功。
    • msg: 响应消息。
    • data: 具体数据，包括邀请码的详细信息。
  • status: HTTP 状态码，200 表示请求成功。
  • headers: 响应头信息。
  • config: 请求配置详情，包括 URL、请求方法、参数、头部信息等。
  • request: 请求对象，具体内容在此为空。

如需对其中的字段进行详细解析，请告知我！ 😊

// spid-admin/src/utils/request.ts
import axios from 'axios'
import { Message, MessageBox } from 'element-ui'
import { UserModule } from '@/store/modules/user'
import { api } from '@/utils/public-path'let logoutCount:number = 0
const service = axios.create({baseURL: api, // url = base url + request urltimeout: 0,withCredentials: false // send cookies when cross-domain requests
})// Request interceptors
service.interceptors.request.use((config) => {// Add X-Access-Token header to every request, you can add other custom headers hereif (UserModule.token) {const { token }: any = JSON.parse(UserModule.token)config.headers['token'] = token}//console.log('Request config:', config); // 添加这行代码return config},(error) => {Promise.reject(error)}
)// Response interceptors
service.interceptors.response.use((response) => {//console.log('Intercepted Response:', JSON.stringify(response));//console.log('Full Response Data:', JSON.stringify(response, null, 2));// Some example codes here:// You can change this part for your own usage.// status == 200: success// code === 0: success// code === 1: invalid access tokenconst res = response.dataif (res.code !== 0) {if (res.code === 1) {Message({message: res.msg || 'Error',type: 'warning',duration: 5 * 1000})return response.data} else if (res.code === 7) {MessageBox.confirm('你已被登出，可以取消继续留在该页面，或者重新登录','确定登出',{confirmButtonText: '重新登录',cancelButtonText: '取消',type: 'warning'}).then(() => {logoutCount = 0localStorage.clear()sessionStorage.clear()UserModule.ResetToken()location.reload() // To prevent bugs from vue-router})} else if (res.indexOf('form') !== -1) {// 支付宝支付 ....... 为什么不改造成正常接口呢 不理解return Promise.resolve(res)} else {Message({message: res.msg || 'Error',type: 'error',duration: 5 * 1000})return Promise.reject(new Error(res.msg || 'Error'))}} else {return response.data}},(error) => {console.log(error)let errorInfo = error.responselet msgif (!errorInfo) {const { request: { statusText, status }, config } = JSON.parse(JSON.stringify(error))errorInfo = {statusText,status,request: { responseURL: config.url }}msg = status + '：' + errorInfo.statusText} else {if (error.response.data.code === -1) {if (logoutCount === 0) {MessageBox.confirm('你已被登出，可以取消继续留在该页面，或者重新登录','确定登出',{confirmButtonText: '重新登录',cancelButtonText: '取消',type: 'warning'}).then(() => {logoutCount = 0localStorage.clear()sessionStorage.clear()UserModule.ResetToken()location.reload() // To prevent bugs from vue-routermsg = error.response.data.msg})logoutCount++return}} else if (errorInfo.data.code === 1 || errorInfo.data.code === 2) {msg = errorInfo.data.msg} else {msg = error.response.data.status + '：' + error.response.data.message}}Message({message: msg,type: 'error',duration: 5 * 1000})return Promise.reject(msg)}
)export default service

这段代码是一个基于 axios 的请求封装，主要用于处理 HTTP 请求的拦截和响应拦截。它结合了 Element UI 的消息提示和弹窗组件，实现了以下功能：

1. 核心功能

  • 请求拦截：
    • 在请求发送之前，检查用户是否已登录（通过 UserModule.token）。
    • 如果用户已登录，将 token 添加到请求头中。
  • 响应拦截：
    • 对响应数据进行统一处理，根据返回的 code 值判断请求是否成功。
    • 处理特定的错误码（如 code === 1 或 code === 7），并显示相应的提示信息。
    • 在用户登录状态失效时，弹出确认框提示用户重新登录。

2. 代码结构分析

请求拦截器
service.interceptors.request.use((config) => {if (UserModule.token) {const { token }: any = JSON.parse(UserModule.token);config.headers['token'] = token;}return config;},(error) => {Promise.reject(error);}
);
  • 功能：
    • 在每次请求发送之前，检查用户是否已登录。
    • 如果已登录，将 token 添加到请求头中。
  • 注意：
    • UserModule.token 是从 Vuex 模块中获取的，需要确保 UserModule 已正确初始化。
响应拦截器
service.interceptors.response.use((response) => {const res = response.data;if (res.code !== 0) {if (res.code === 1) {Message({message: res.msg || 'Error',type: 'warning',duration: 5 * 1000,});return response.data;} else if (res.code === 7) {MessageBox.confirm('你已被登出，可以取消继续留在该页面，或者重新登录','确定登出',{confirmButtonText: '重新登录',cancelButtonText: '取消',type: 'warning',}).then(() => {logoutCount = 0;localStorage.clear();sessionStorage.clear();UserModule.ResetToken();location.reload(); // To prevent bugs from vue-router});} else if (res.indexOf('form') !== -1) {// 支付宝支付 ....... 为什么不改造成正常接口呢 不理解return Promise.resolve(res);} else {Message({message: res.msg || 'Error',type: 'error',duration: 5 * 1000,});return Promise.reject(new Error(res.msg || 'Error'));}} else {return response.data;}},(error) => {console.log(error);let errorInfo = error.response;let msg;if (!errorInfo) {const { request: { statusText, status }, config } = JSON.parse(JSON.stringify(error));errorInfo = {statusText,status,request: { responseURL: config.url },};msg = status + '：' + errorInfo.statusText;} else {if (error.response.data.code === -1) {if (logoutCount === 0) {MessageBox.confirm('你已被登出，可以取消继续留在该页面，或者重新登录','确定登出',{confirmButtonText: '重新登录',cancelButtonText: '取消',type: 'warning',}).then(() => {logoutCount = 0;localStorage.clear();sessionStorage.clear();UserModule.ResetToken();location.reload(); // To prevent bugs from vue-routermsg = error.response.data.msg;});logoutCount++;return;}} else if (errorInfo.data.code === 1 || errorInfo.data.code === 2) {msg = errorInfo.data.msg;} else {msg = error.response.data.status + '：' + error.response.data.message;}}Message({message: msg,type: 'error',duration: 5 * 1000,});return Promise.reject(msg);}
);
  • 功能：
    • 对响应数据进行统一处理。
    • 根据返回的 code 值判断请求是否成功，并显示相应的提示信息。
    • 处理特定的错误码（如 code === 1 或 code === 7），并在用户登录状态失效时弹出确认框提示用户重新登录。
  • 注意：
    • code === 7 表示用户登录状态失效，会清除本地存储并刷新页面。
    • code === 1 表示请求失败，会显示警告信息。
    • 其他错误码会显示错误信息。

3. 改进建议

  • 支付宝支付逻辑：
    • 代码中提到 res.indexOf('form') !== -1 是处理支付宝支付的逻辑，但注释中提到“为什么不改造成正常接口呢 不理解”。建议将支付宝支付逻辑改造为标准的接口返回格式，以便统一处理。
  • 错误处理：
    • 在 error.response 为空时，手动构造错误信息。可以考虑使用更健壮的方式处理网络错误。
  • logoutCount 的作用：
    • logoutCount 用于防止多次弹出登录失效的确认框。可以考虑使用更优雅的方式实现，例如在 Vuex 中维护登录状态。

4. 总结

这段代码是一个典型的 axios 请求封装，适用于需要统一处理请求和响应的场景。它结合了 Element UI 的消息提示和弹窗组件，提供了良好的用户体验。通过进一步优化错误处理和逻辑封装，可以提高代码的可维护性和健壮性。

在这里插入图片描述

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

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

相关文章

基于FPGA的洗衣机控制器电子定时器

基于FPGA的洗衣机控制器电子定时器

文章目录 功能描述 一、框架 二、verilog代码 控制模块实现 三、视频上板效果展示 功能描述 （1）定时启动正转20秒暂停10秒反转20秒暂 停10秒，定时未到回到“正转20秒暂停10秒……”，定时到则停止; 若定时到，则停…
阅读更多...
大数据技术 指令笔记1

大数据技术 指令笔记1

3.cd命令 cd命令用来切换工作目录至DirName。其中DirName表示法可为绝对路径或相对路径 例如： cd/ 切换到根目录 cd 切换到家目录 cd /etc/sysconfig/ 切换到/etc/sysconfig目录 cd .. 返回到父目录 4.Is命令 Is命令用来列出文件或…
阅读更多...
Android 性能优化：内存优化（实践篇）

Android 性能优化：内存优化（实践篇）

1. 前言 前一篇文章Android性能优化：内存优化 （思路篇） 大概梳理了Android 内存原理和优化的必要性及应该如何优化，输出了一套短期和长期内存优化治理的SOP方案。 那么这一篇文章就总结下我最近在做内存优化如何实践的&#xff0…
阅读更多...
OSPF使能配置

OSPF使能配置

OSPF路由协议是用于网际协议（ip）网络的链路状态的路由协议。该协议使用链路状态路由算法的内部网关协议（IGP），在单一自治系统（AS）内部工作。适用于IPV4的OSPFv2协议定义于RFC 2328，R…
阅读更多...
【STM32+CubeMX】 新建一个工程(STM32F407)

【STM32+CubeMX】 新建一个工程(STM32F407)

相关文章： 【HAL库】 STM32CubeMX 教程 1 --- 下载、安装 目录 第一部分、新建工程 第二部分、工程文件解释 第三部分、编译验证工程 友情约定：本系列的前五篇，为了方便新手玩家熟悉CubeMX、Keil的使用，会详细地截图每一步Cu…
阅读更多...
刚体变换矩阵的逆

刚体变换矩阵的逆

刚体运动中的变换矩阵为： 求得变换矩阵的逆矩阵为： opencv应用 cv::Mat R; cv::Mat t;R.t(), -R.t()*t
阅读更多...
List ---- 模拟实现LIST功能的发现

List ---- 模拟实现LIST功能的发现

目录 listlist概念 list 中的迭代器list迭代器知识const迭代器写法list访问自定义类型 附录代码 list list概念 list是可以在常数范围内在任意位置进行插入和删除的序列式容器，并且该容器可以前后双向迭代。list的底层是双向链表结构，双向链表中每个元素…
阅读更多...
谷云科技iPaaS V7.0+企业级AI Agent产品全新发布

谷云科技iPaaS V7.0+企业级AI Agent产品全新发布

当下，大数据、人工智能等前沿技术迅猛发展，正以前所未有的速度重塑着企业 IT 集成的格局。谷云科技作为深耕国内集成领域多年的专业厂商，始终紧跟技术趋势变化，深度洞察客户需求，致力于以创新驱动为企业数字化转型赋能…
阅读更多...
h264之多视点mvc编码及解码过程(JMVC平台举例）

h264之多视点mvc编码及解码过程(JMVC平台举例）

h264标准参考平台JMVC是针对MVC标准的，JMVC支持多视点编码、合流、多视点解码操作。可以利用JMVC生成h264 mvc码流和解码。 JMVC的下载地址是：jvet / JMVC GitLabH.264/AVC multi-view coding (MVC) extension JMVC reference softwarehttps://vcgit.hh…
阅读更多...
快手一面-面经

快手一面-面经

1. RPC和Http的区别？ RPC（Remote Procedure Call，远程过程调用）和 HTTP（HyperText Transfer Protocol，超文本传输协议）是两种不同的通信机制，它们有不同的用途、工作原理和应用场景…
阅读更多...
【论文+源码】基于Spring和Spring MVC的汉服文化宣传网站

【论文+源码】基于Spring和Spring MVC的汉服文化宣传网站

为了实现一个基于Spring和Spring MVC的汉服文化宣传网站，我们需要创建一个简单的Web应用程序来展示汉服文化和相关信息。这个系统将包括以下几个部分： 数据库表设计：定义文章、用户和评论的相关表。实体类：表示数据库中的数据。DAO层接口及MyBatis映射文件：用于与数据库交…
阅读更多...
牛客网刷题 ——C语言初阶（2分支和循环-for）——打印菱形

牛客网刷题 ——C语言初阶（2分支和循环-for）——打印菱形

1. 题目描述 用C语言在屏幕上输出以下图案： 2. 思路 我是先上手，先把上半部分打印出来，然后慢慢再来分析，下面这是我先把整个上半部分打印出来，因为空格不方便看是几个，这里先用&代替空格了 然后这里…
阅读更多...
Maven 详细配置：Maven settings 配置文件的详细说明

Maven 详细配置：Maven settings 配置文件的详细说明

Maven settings 配置文件是 Maven 环境的重要组成部分，它用于定义用户特定的配置信息和全局设置，例如本地仓库路径、远程仓库镜像、代理服务器以及认证信息等。settings 文件分为全局配置文件（settings.xml）和用户配置文件&#x…
阅读更多...
STM32学习之MPU6050芯片 及 软件I2C读写MPU6050实验

STM32学习之MPU6050芯片 及 软件I2C读写MPU6050实验

MPU6050是一个6轴姿态传感器，可测量芯片自身X、Y、Z轴的加速度、角速度参数，可以通过这些数据融合，可进一步得到姿态角（或者叫做欧拉角），常应用于平衡车、飞行器等需要检测自身姿态的场景 一个IMU&#xf…
阅读更多...
我用AI学Android Jetpack Compose之开篇

我用AI学Android Jetpack Compose之开篇

最近突发奇想，想学一下Jetpack Compose，打算用Ai学，学最新的技术应该要到官网学，不过Compose已经出来一段时间了，Ai肯定学过了，用Ai来学，应该问题不大，学习过程记录下来，…
阅读更多...
前路漫漫，曙光在望 ！

前路漫漫，曙光在望 ！

起始 从20年大一开始写作至今，转眼五年时光已经过去了，最开始在CSDN这个平台写博客也只是因为一次机缘巧合情况下得知写博客可以获取奖赏，所以那个时期开始疯狂在CSDN发文记录自己编程学习过程，但是至今也未从写作中获利一分哈…
阅读更多...
【WPF】 数据绑定机制之INotifyPropertyChanged

【WPF】 数据绑定机制之INotifyPropertyChanged

INotifyPropertyChanged 是 WPF 中的一个接口，用于实现 数据绑定 中的 属性更改通知。它的主要作用是，当对象的某个属性值发生更改时，通知绑定到该属性的 UI 控件更新其显示内容。 以下是有关 INotifyPropertyChanged 的详细信息和实现方法&…
阅读更多...
Netron可视化深度学习的模型框架，大大降低了大模型的学习门槛

Netron可视化深度学习的模型框架，大大降低了大模型的学习门槛

深度学习是机器学习的一个子领域，灵感来源于人脑的神经网络。深度学习通过多层神经网络自动提取数据中的高级特征，能够处理复杂和大量的数据，尤其在图像、语音、自然语言处理等任务中表现出色。常见的深度学习模型： 卷积神经网络…
阅读更多...
Robot---奇思妙想轮足机器人

Robot---奇思妙想轮足机器人

1 背景 传统机器人有足式、轮式、履带式三种移动方式，每种移动方式都有各自的优缺点。轮式机器人依靠车轮在地面上移动，能源利用率高、移动速度快，但是仅以轮子与地面接触，缺乏越障能力和对复杂地形的适应能力，尤其面对…
阅读更多...
用JAVA编写一个简单的小游戏

用JAVA编写一个简单的小游戏

用Java语言编写一个简单的小游戏。这里是一个非常基础的猜数字小游戏的代码示例。在这个游戏中，程序会随机选择一个1到100之间的整数，玩家需要猜测这个数字是什么。每次猜测后，程序会告诉玩家他们猜的数字是太高了、太低了还是正确。 impor…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023