【Vue】登录功能中对于错误提示信息的重构

登录功能中,使用Axios 的响应拦截器对于错误提示进行重构。
原代码:

//form实例统一校验
const formRef = ref(null);
const router = useRouter();
const doLogin = () => {formRef.value.validate(async (valid) => {// valid: 所有表单都通过校验  才为true//console.log(valid)if (valid) {//console.log(form.value)const { account, password } = form.valuetry {const res = await loginAPI({ account, password });console.log(res)ElMessage({ type: 'success', message: '登录成功' })router.replace({ path: '/' })} catch (e) {console.log(e)ElMessage({ type: 'error', message: e.response.data.message })}}})
}

将catch中捕获的错误信息放在Axios 的响应拦截器中处理,减少组件中的代码量:

// axios响应式拦截器
// 一般进行错误的统一提示,token失效的处理等
http.interceptors.response.use(res => res.data, e => {//统一错误提示ElMessage({type: 'error',message: e.response.data.message})return Promise.reject(e)
})

自此,可以删除组件中的try…catch中的catch部分:

const doLogin = () => {formRef.value.validate(async (valid) => {// valid: 所有表单都通过校验  才为true//console.log(valid)if (valid) {//console.log(form.value)const { account, password } = form.valueconst res = await loginAPI({ account, password });console.log(res)ElMessage({ type: 'success', message: '登录成功' })router.replace({ path: '/' })}})
}

关于http.interceptors.response.use()中的参数介绍

在 Axios 中,res 和 e 参数分别代表成功的响应对象和错误对象。这些参数是由 Axios 在请求完成时传递给响应拦截器函数的。让我们深入了解一下这些参数是从哪里来的,以及 Axios 如何处理它们。

res 和 e 参数的来源
成功的响应 (res)

当 Axios 发出一个 HTTP 请求并成功接收到服务器的响应时,它会将该响应对象传递给 onFulfilled 函数。这个响应对象包含了从服务器返回的所有数据和元信息。

http.interceptors.response.use(res => res.data,  // `res` 是成功的响应对象e => Promise.reject(e)  // `e` 是错误对象
);

这里的 res 是一个典型的 Axios 响应对象,它包含以下属性:

data: 服务器返回的数据。
status: HTTP 状态码(例如 200、404)。
statusText: HTTP 状态文本(例如 “OK”、“Not Found”)。
headers: 服务器响应头。
config: 用于生成请求的配置信息。
request: 生成这个响应的请求对象。
错误的响应 (e)

当 Axios 发出一个 HTTP 请求但未能成功接收到服务器的响应,或者接收到一个非 2xx 的状态码时,它会将该错误对象传递给 onRejected 函数。这个错误对象包含了错误的详细信息。

http.interceptors.response.use(res => res.data,  // `res` 是成功的响应对象e => Promise.reject(e)  // `e` 是错误对象
);

这里的 e 是一个包含错误信息的对象,可能包含以下属性:

message: 错误信息。
name: 错误名称。
stack: 错误的堆栈信息(用于调试)。
config: 用于生成请求的配置信息。
code: 错误代码(例如 ECONNABORTED 表示请求超时)。
request: 生成这个错误的请求对象。
response: 如果服务器有响应但状态码不在 2xx 范围内,则包含响应对象。

Axios 内部处理流程

让我们看看 Axios 内部是如何处理响应和错误的。

发送请求

Axios 使用 axios.request(config) 或类似方法发送 HTTP 请求。当请求发送出去后,Axios 会等待服务器的响应。

接收响应

当服务器响应时,Axios 会首先检查 HTTP 状态码。如果状态码在 2xx 范围内,Axios 会将响应对象视为成功,并传递给 onFulfilled 函数。如果状态码不在 2xx 范围内,或者请求过程中发生了错误,Axios 会将错误对象传递给 onRejected 函数。

拦截器处理

任何已注册的拦截器都会在请求发送和响应接收后执行。对于响应拦截器,成功的响应会被传递给第一个 onFulfilled 函数进行处理,如果所有 onFulfilled 函数都成功执行,最终返回处理后的响应数据。对于错误响应,错误对象会被传递给第一个 onRejected 函数,如果所有 onRejected 函数都执行成功,最终返回处理后的错误对象。

完整示例

以下是一个完整的示例,展示了 Axios 如何通过响应拦截器处理成功的响应和错误响应:

import axios from 'axios';// 创建 Axios 实例
const http = axios.create({baseURL: 'https://api.example.com',timeout: 1000,headers: { 'X-Custom-Header': 'foobar' }
});// 添加响应拦截器
http.interceptors.response.use(res => {// 处理成功的响应console.log('响应成功:', res);return res.data;  // 返回响应数据},e => {// 处理错误的响应console.error('响应错误:', e);if (e.response) {console.error('响应错误数据:', e.response.data);console.error('响应错误状态码:', e.response.status);console.error('响应错误头:', e.response.headers);} else if (e.request) {console.error('请求错误:', e.request);} else {console.error('请求设置错误:', e.message);}return Promise.reject(e);  // 拒绝 Promise 并返回错误对象}
);// 发送请求
http.get('/some-endpoint').then(data => {console.log('请求数据:', data);}).catch(error => {console.error('请求失败:', error);});

在这个示例中,响应拦截器 http.interceptors.response.use 接受两个参数:

一个处理成功响应的函数,它接收 res 参数并返回 res.data。
一个处理错误响应的函数,它接收 e 参数并记录错误信息,最后拒绝(reject)这个错误对象。
通过这种方式,Axios 可以统一处理所有 HTTP 请求的响应和错误,简化了代码逻辑并提高了代码的可维护性。

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

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

相关文章

【网络安全产品】---下一代防火墙

再此之前也大概介绍过传统防火墙,waf以及数据库防火墙,今天发现居然没有对下一代防火墙有过学习。。。今天参考一些资料进行整理。。 网络安全产品---数据库防火墙/审计_数据库审计 数据库防火墙-CSDN博客 【网络安全产品】---应用防火墙(WAF)_waf csd…

JavaScript 导致内存泄漏的场景和规避方法

在日常开发中,我们经常会无意识一些操作导致内存溢出。为此我总结一下内存溢出的几种场景供大家参考。希望能在优化自己代码的道路上有所帮助。 1、意外的全局变量 由于使用未声明的变量,而意外的创建了一个全局变量,使这个变量一直留在内存…

Danikor智能拧紧轴控制器过压维修知识

【丹尼克尔拧紧轴控制器故障代码维修】 【丹尼克尔Danikor控制器维修具体细节】 丹尼克尔拧紧轴控制器作为一种高精度的电动拧紧工具,广泛应用于各种工业生产线。然而,在使用过程中,由于各种原因,可能会出现Danikor扭矩扳手控制…

Linux系统编程——部分内容补充

回顾 进程 内核相关数据结构 代码和数据,一个可执行程序加载到内存变成进程,不仅仅是把代码和数据加载进去就完事了,得“先描述,再组织”,每个进程都有内核数据结构,地址空间,进程相关页表&a…

内核学习——5、中断

硬中断: 是一个异步信号,或需要改变执行一个同步事件 外设产生,基于IRQ,CPU将相应请求给到硬件驱动处理事务 处理中断的驱动需要运行在CPU上的,中断产生时,CPU停止当前程序去处理中断请求,一个…

【案例分析】一文讲清楚SaaS产品运营的六大杠杆是什么?具体怎么运用?

在SaaS(软件即服务)行业,如何快速获取用户并实现持续增长一直是企业关注的重点。近年来,分销裂变策略因其高效性和低成本特性,成为许多SaaS企业实现快速增长的秘诀。下面,我们将通过一个具体的案例来剖析成…

Ubuntu-24.04-live-server-amd64安装界面中文版

系列文章目录 Ubuntu安装qemu-guest-agent Ubuntu-24.04-live-server-amd64启用ssh Ubuntu乌班图安装VIM文本编辑器工具 文章目录 系列文章目录前言一、准备工作二、开始安装三、测试效果总结 前言 Centos结束,转战Ubuntu。我之所以写这篇文章,是因为我…

精细化,智能费控4.0的竞争内核

出差,在百度百科被释义为,受派遣到外地或负担临时任务。 这是一个对员工清晰对管理却笼统的定义。站在企业费用管理的角度,出差可细分为会议出差、培训出差、市场拓展出差、项目出差、驻外回厂出差、探亲出差、售后维修出差、新人报道出差等不…

防爆气象站:化工厂区气象环境监测的最佳选择

在化工厂区,气象环境监测至关重要,它直接关系到生产安全、环境保护以及员工健康。防爆气象站作为专业的监测设备,凭借其独特的防爆性能和精准的数据监测能力,成为化工厂区气象环境监测的最佳选择。 防爆气象站采用先进的防爆技术…

访问网络 测试没有问题,正式有问题

ping -c 5 -i 1 www.baidu.com 首先检查一下网络,在正式服务器ping 一下要访问的地址。 如果不行,联系网络管理员开通。 笔者因为这个问题浪费了半天时间,一开始都以为是代码问题 以后大家看到这个异常,解决如下: …

逻辑卷管理器 (LVM) 简介

古老的 e5 主机目前有这些存储设备 (硬盘): 系统盘 (M.2 NVMe SSD 480GB), 数据盘 (3.5 英寸 SATA 硬盘 4TB x2). 窝决定使用 LVM 对数据盘进行管理. 逻辑卷管理器 (LVM) 可以认为是一种 (单机) 存储虚拟化 技术. 多个物理存储设备 (PV) 组成一个存储池 (VG), 然后划分虚拟分区…

docker ce的使用介绍

docker docker17.03以后 docker ce,社区免费版,vscode的docker插件使用的该版本(默认windows只支持windows容器,linux支持linux容器)docker ee,企业版本 docker17.03以前 docker toolbox,基于…

手把手带你从异构数据库迁移到崖山数据库

一、数据迁移简介 1.典型场景与需求 在国产化浪潮下,数据库系统的国产化替代成为了一个日益重要的议题,有助于企业降低对外依赖,提升信息安全和自主性。 以Oracle、MySQL为代表的传统关系型数据库管理系统,在企业应用中占据了重要…

angular12父子组件通信的三种方法

在Angular中,父组件可以通过输入属性(Input)来传递数据给子组件,但是不能直接修改子组件内部的变量,尤其是如果这些变量不是通过输入属性传递的。这是因为在Angular中,子组件的内部状态应该由子组件自己管理…

7zip安装后压缩包图标显示空白解决办法

记录安装7zip软件后,出现了如下的图标是空白的问题: (虽然我最终解决了但是我不确定是哪一步起的作用,但是我也懒得再情景复现了。) 我的解决过程是: 在开始菜单栏搜索“7zip ”然后点击“打开。 然后点击 &#xf…

Android Service学习笔记

1、Service介绍 Android Service(服务)是 Android 四大组件之一,主要作用是执行后台操作。它是一个后台运行的组件,执行长时间运行且不需要用户交互的任务。即使应用被销毁也依然可以工作。 Service并不是运行在一个独立的进程当…

【送模板】5张图,帮你轻松搞懂OKR工作法

OKR是目标与关键结果法的缩写,OKR运用在工作中就是强调对业务进行逻辑思考,找到目标与关键结果之间的因果关系。这种因果关系的是否准确决定我们努力的价值。 OKR是一种高效的目标管理方法。“O”就是object,目标的意思,“kr”就…

81600B keysight 是德 可调谐激光源 简述

KEYSIGHT 81600B 是可调谐激光源模块,广泛应用于光通信和光学测试领域。该系列产品通过低自发源发射(low SSE)技术实现了高信噪比(>70 dB/nm),并具有快速准确的扫描能力,覆盖1260 nm至1640 n…

2024 年 Python 基于 Kimi 智能助手 Moonshot Ai 模型搭建微信机器人(更新中)

注册 Kimi 开放平台 Kimi:https://www.moonshot.cn/ Kimi智能助手是北京月之暗面科技有限公司(Moonshot AI)于2023年10月9日推出的一款人工智能助手,主要为用户提供高效、便捷的信息服务。它具备多项强大功能,包括多…

大模型 舆情分析 数据构造 prompt提示词 经验分享 数据准备

最近在做舆情分析,需要执行比较复杂的任务流程(例如同时执行人名识别、相关机构识别、90分类),传统Bert无法胜任,因此尝试使用大模型进行处理。 下面的一些提示词是我用来准备数据的,这些数据可以按照不同…