/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.rhkb.cn/news/503953.html

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

相关文章

LabVIEW调用不定长数组 DLL数组

LabVIEW调用不定长数组 DLL数组

在使用 LabVIEW 调用 DLL 库函数时，如果函数中的结构体包含不定长数组，直接通过 调用库函数节点（Call Library Function Node） 调用通常会遇到问题。这是因为 LabVIEW 需要与 DLL 中的数据结构完全匹配，而包含不定长数…
阅读更多...
课题推荐——基于GPS的无人机自主着陆系统设计

课题推荐——基于GPS的无人机自主着陆系统设计

关于“基于GPS的无人机自主着陆系统设计”的详细展开，包括项目背景、具体内容、实施步骤和创新点。如需帮助，或有导航、定位滤波相关的代码定制需求，请点击文末卡片联系作者 文章目录 项目背景具体内容实施步骤相关例程MATLAB例程python例程 …
阅读更多...
深入Android架构(从线程到AIDL)_18 SurfaceView的UI多线程02

深入Android架构(从线程到AIDL)_18 SurfaceView的UI多线程02

目录 2、 使用SurfaceView画2D图 范例一 设计GameLoop(把小线程移出来) 范例二 2、 使用SurfaceView画2D图 范例一 以SurfaceView绘出Bitmap图像设计SpriteView类别来实作SurfaceHolder.Callback接口首先来看个简单的程序，显示出一个Bitmap图像。这个图像就构…
阅读更多...
Redis Java 集成到 Spring Boot

Redis Java 集成到 Spring Boot

Hi~！这里是奋斗的明志，很荣幸您能阅读我的文章，诚请评论指点，欢迎欢迎 ~~ 🌱🌱个人主页：奋斗的明志 🌱🌱所属专栏：Redis 📚本系列文章为个人学习笔…
阅读更多...
鸿蒙开发（29）弹性布局 (Flex)

鸿蒙开发（29）弹性布局 (Flex)

概述 弹性布局（Flex）提供更加有效的方式对容器中的子元素进行排列、对齐和分配剩余空间。常用于页面头部导航栏的均匀分布、页面框架的搭建、多行数据的排列等。 容器默认存在主轴与交叉轴，子元素默认沿主轴排列，子元素在主轴方…
阅读更多...
LangChain速成课程_构建基于OpenAI_LLM的应用

LangChain速成课程_构建基于OpenAI_LLM的应用

思维导图 什么是LangChain 特点描述基于语言模型LangChain 是一个专为语言模型（如 GPT-4）设计的开发框架。模型输入/输出支持灵活的模型输入和输出处理，可以适应各种不同的应用需求。数据感知能够将语言模型与其他数据源（如维基百…
阅读更多...
将txt转成excel正则化公式的调整

将txt转成excel正则化公式的调整

将训练的结果转换成excel是送到画图的关键，但是在转的过程中出现了问题，发现是正则化公式的结果。 使用网站进行调试，最终可以转了。下面是调试的工具以及调试好的代码。 regex101: build, test, and debug regex 上面是正则化公式&#xf…
阅读更多...
Linux的proc目录与什么有关?【以及它里面的文件各自记录着什么信息】

Linux的proc目录与什么有关?【以及它里面的文件各自记录着什么信息】

在 Linux 系统中，/proc 目录是一个虚拟文件系统，提供了关于内核、进程和系统状态的实时信息。它与系统的 内核 和 进程 运行状态紧密相关，是系统管理员、开发人员和用户了解系统运行状况的重要途径。 /proc 目录的名称来源于 “process”&am…
阅读更多...
28、使用StreamPark管理作业中，关于默认环境变量设置和默认动态参数设置的修改

28、使用StreamPark管理作业中，关于默认环境变量设置和默认动态参数设置的修改

在使用过一段时间的streampark后，发现flink on k8s作业配置过于繁琐了，特别是pod-template.yaml的编写（主要是环境变量设置，环境变量关系着前面的日志插件中通过环境变量获取作业名称），动态参数的编写&…
阅读更多...
springboot + vue+elementUI图片上传流程

springboot + vue+elementUI图片上传流程

1.实现背景 前端上传一张图片&#xff0c;存到后端数据库&#xff0c;并将图片回显到页面上。上传组件使用现成的elementUI的el-upload。、 2.前端页面 <el-uploadclass"upload-demo"action"http://xxxx.xxx.xxx:9090/file/upload" :show-file-list&q…
阅读更多...
《HeadFirst设计模式》笔记（上）

《HeadFirst设计模式》笔记（上）

设计模式的目录&#xff1a; 1 设计模式介绍 要不断去学习如何利用其它开发人员的智慧与经验。学习前人的正统思想。 我们认为《Head First》的读者是一位学习者。 一些Head First的学习原则&#xff1a; 使其可视化将文字放在相关图形内部或附近&#xff0c;而不是放在底部…
阅读更多...
TensorRT-LLM中的MoE并行推理

TensorRT-LLM中的MoE并行推理

2种并行方式&#xff1a; moe_tp_size&#xff1a;按照维度切分&#xff0c;每个GPU拥有所有Expert的一部分权重。 moe_ep_size: 按照Expert切分&#xff0c;每个GPU有用一部分Expert的所有权重。 二者可以搭配一起使用。 限制&#xff1a;二者的乘积&#xff0c;必须等于模…
阅读更多...
GoChina备案管家

GoChina备案管家

阿里云的 GoChina备案管家 是阿里云提供的一项服务&#xff0c;旨在帮助企业和个人快速、高效地完成中国大陆的 网站备案&#xff08;ICP备案&#xff09;。根据中国的互联网法律法规&#xff0c;所有在中国境内运行的网站都需要进行备案&#xff0c;才能合法发布内容。 GoChin…
阅读更多...
Linux存储管理之核心秘密(The Core Secret of Linux Storage Management)

Linux存储管理之核心秘密(The Core Secret of Linux Storage Management)

Linux存储管理之核心秘密 如果你来自Windows环境&#xff0c;那么Linux处理和管理存储设备的方式对你而言可能显得格外不同。我们知道&#xff0c;Linux的文件系统并不采用Windows那样的物理驱动器表示方式&#xff08;如C:、D:或E:&#xff09;&#xff0c;而是构建了一个以&…
阅读更多...
平面坐标转大地坐标（arcgisPro中进行）

平面坐标转大地坐标（arcgisPro中进行）

1、将需要转换的红线导入arcgisPro中&#xff0c;如下&#xff1a; 2、在地图菜单栏中&#xff0c;选择坐标转换工具&#xff0c;如下&#xff1a; 3、打开坐标转换工具 4、开启捕捉 5、 设置大地坐标显示格式 6、如下&#xff1a; 7、显示如图&#xff1a; 8、再依次添加几个待…
阅读更多...
QT 端口扫描附加功能实现 端口扫描5

QT 端口扫描附加功能实现 端口扫描5

上篇QT 下拉菜单设置参数 起始端口/结束端口/线程数量 端口扫描4-CSDN博客 在扫描结束后设置Scan按钮为可用&#xff0c;并提示扫描完成 在 MainWindow 类中添加一个成员变量来跟踪正在进行的扫描任务数量&#xff1a; 在 MainWindow 的构造函数中初始化 activeScanTasks&…
阅读更多...
使用WPF在C#中制作下载按钮

使用WPF在C#中制作下载按钮

本示例使用 WPF 制作一个下载按钮。以下 XAML 代码显示了程序如何构建该按钮。 <Window x:Class"howto_download_button.Window1"xmlns"http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x"http://schemas.microsoft.com/winfx/…
阅读更多...
Unity Burst详解

Unity Burst详解

【简介】 Burst是Unity的编译优化技术&#xff0c;优化了从C#代码编译成Native代码的过程&#xff0c;经过编译优化后代码有更高的运行效率。 在Unity中使用Burst很简单&#xff0c;在方法或类前加上[BurstCompile]特性即可。在构建时编译代码的步骤&#xff0c;Burst编译器会…
阅读更多...
Redis 数据库源码分析

Redis 数据库源码分析

Redis 数据库源码分析 我们都知道Redis是一个 <key,value> 的键值数据库&#xff0c;其实也就是一个 Map。如果让我来实现这样一个 Map&#xff0c;我肯定是用数组&#xff0c;当一个 key 来的时候&#xff0c;首先进行 hash 运算&#xff0c;接着对数据的 length 取余&…
阅读更多...
基于YOLO11的无人机视角下羊群检测系统

基于YOLO11的无人机视角下羊群检测系统

基于YOLO11的无人机视角下羊群检测系统 (价格90) 包含 [sheep] 【羊】 1个类 通过PYQT构建UI界面&#xff0c;包含图片检测&#xff0c;视频检测&#xff0c;摄像头实时检测。 &#xff08;该系统可以根据数据训练出的yolo11的权重文件&#xff0c;运用在其他检测系统上…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023