Vue axios请求报错后重复提示同一句话，处理只提醒一次这句话，避免重复提醒

百思不得小李

已于 2024-04-08 14:47:16 修改

阅读量333

点赞数 4

分类专栏： JS实战记录 vue2实战记录文章标签： vue.js 前端 javascript

于 2024-04-08 14:45:46 首次发布

本文链接：https://blog.csdn.net/qq_37635012/article/details/137508563

版权

vue2实战记录同时被 2 个专栏收录

73 篇文章 10 订阅 ¥99.90 ¥99.00

订阅专栏

超级会员免费看

JS实战记录

62 篇文章 2 订阅 ¥29.90 ¥99.00

订阅专栏

超级会员免费看

现在有这么一个场景，用户在操作某个页面时，同时调了多个后台接口，这个时候恰好接口同时报错了或者说token恰好过期了，这个时候后台会报同一句话的错误：“服务未授权/授权已过期,请重新登录“，这是因为在我们的axios封装时用到了同一句报错信息，如果同时弹窗里弹多次这句话就会很不友好，我只希望提醒一次，如下是错误示例：

     Message({
   
       message: '服务未授权/授权已过期,请重新登录',
       type: 'error',
       duration: 5 * <

了解本专栏

订阅专栏解锁全文

超级会员免费看

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

百思不得小李

关注关注

4
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue axios请求报错后重复提示同一句话，处理只提醒一次这句话，避免重复提醒

【代码】Vue axios请求报错后重复提示，处理只提醒一次。
复制链接

扫一扫

专栏目录

订阅专栏

响应器拦截成功弹框只跳一次

R_RA222的博客

07-15

511

响应器拦截成功弹框只跳一次在响应拦截成功的时候判断token令牌过期返回登录界面并弹框修改前解决办法新建一个message.js文件，如下： import {Message} from 'element-ui' // 私有属性，只在当前文件可用 const showMessage = Symbol('showMessage') export default class domMessage { success (options, single = true) { this[showMess

vue axios重复点击取消上一次请求封装的方法

10-16

主要介绍了vue axios重复点击取消上一次请求封装的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

参与评论您还未登录，请先登录后发表或查看评论

前端 vue中axios拦截错误信息一下会有很多报错信息，封装下Message让错误信息只出现一次

csstmg的博客

06-13

1209

【代码】前端 vue中axios拦截错误信息一下会有很多报错信息，封装下Message让错误信息只出现一次。

vue+element项目中页面多个接口异常，只提示一次异常信息

航仔的博客

12-13

1285

有时候一个页面会同时调多个接口，但是多个接口异常，需要做提示，那么提示的时候会弹出很多的提示信息，这无疑让体验感降低很多。所以针对这种情况，我们配合element UI统一做一个异常状态的处理，只能显示一次提示的功能，后续代码调接口的时候。第二步，需要在你的响应拦截器（interceptors.response.use）的页面去引入刚才的文件，我取名为domMessage，引入：import domMessage from './messageOnce'也可以省略去写异常状态下的逻辑了。

arco.design重写message实现只提示一次错误的功能

最新发布

04-29

293

系统错误消息提示优化，优化error展示次数，组件重写覆盖

axios请求拦截，token失效，多个请求报错导致多次显示弹框的问题

Anyuegogogo的博客

08-13

3989

token失效，请求头中需要带上token的请求就会报错，axios的请求拦截中会对异常做处理并显示弹框。如果同时多个请求报错就会显示多个弹框。这样很影响用户体验，我们只需要弹出框弹出一次。以下是解决方法： // 设置一个变量 let tokenAbnormal = false; // 下面是部分异常处理的代码 // 异常处理 // token失效处理，请根据业务需求自行修改 if (res.statusCode === 401 || res.statusCode === 402 || res.sta.

axios的全局配置和拦截器

lannieZ的博客

10-22

1056

axios(三方插件)的基本用法 axios.get/delete/put/post('url').then(function(res){console.log(ret.data)}) 注意：.then的函数形参.data是固定的写法参数问题： axios get、delete的二参可以是params：{id：’’}形式 post、put是{uname:’’,age:’’}形式或者是变量形...

多个接口请求出现报错，提示会连续出现多个，如何只弹出一个提示

知所云

05-14

9217

场景：如果出现网络问题或者token失效，刷新页面，如果有多个接口请求就会出现报错，那么提示就会连续弹出几个如图：使用的是vue+element ui 解决方法：重写一了个message import {Message } from 'element-ui' let messageInstance= null; const rewriteMessage = (options) => { if(messageInstance) { messageInstance.clo.

vue axios请求频繁时取消上一次请求的方法

10-17

主要介绍了vue axios请求频繁时取消上一次请求的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

解决vue axios的封装请求状态的错误提示问题

10-17

本文将详细讲解如何解决Vue与axios结合时，关于请求状态的错误提示问题。首先，axios提供了拦截器（interceptors）功能，允许我们在请求发送前或响应接收后执行自定义逻辑。在Vue项目中，我们可以利用这个特性来...

vue axios请求超时的正确处理方法

08-27

然而，在实际开发中，我们经常会遇到请求超时的问题，这篇文章将介绍 Vue Axios 请求超时的正确处理方法。 Axios 基本用法 ---------------- Axios 库提供了多种方式来发送 HTTP 请求，例如 GET、POST、PUT、...

axios因token过期导致弹出多条信息提示，简单处理解决！

海贼王某人的博客

02-23

3472

首先看一下问题，我们在某个页面同时发起三条请求，token过期导致请求失败，返回登录页后一下弹出三个信息提示，体验感不太好我们只希望他弹出一条提示，解决办法也很简单，在我们封装请求的js文件中加一个判断即可，先声明一个变量showMsg来控制是否需要弹框，初始化为true,然后在请求判断中如果token失效导致走了401，先判断当前是否可以显示弹框，初始化为true第一次可以显示，然后把showMsg变为false,当地二第三请求走到这里的时候，showMsg为false，就不会再继续弹框了，第一次弹框

当请求报错后提示多次，怎么让他提示一次？

yangpengze的博客

04-25

850

像这样得提示很多边很烦那么问题原因当用户时间长了不操作时再次请求就会被后端认为token过期了需要重新登录，请求不到数据所以对用户进行提示，但是由于那个页面请求了多次不同的数据所以提示过多问题分析像这样肯定是请求出的问题所以我们往请求方面得文件去找，我这里是请求拦截这个文件出现得问题 import axios from "axios"; import { MessageBox, Message } from "element-ui"; import store from "@/store".

解决token验证过期,返回登录页面,因为发送多次请求,导致消息多次提示的问题.

weixin_50061893的博客

02-22

5389

我们如果通过在axios响应拦截器中拦截状态码是否为401来提示反馈给用户登录过期消息那么将会弹窗多次,因为即使token过期了也还会发送多次请求,就会有多次401,就会弹窗多次. 这时候我们可以通过过期的时候传递一个值存在localStorage中,然后进入登录界面在生命周期函数中,判断该值是否存在来判断是否是因为登录失效而返回的登录界面.如果是就提示用户登录失效,如果不是则不做任何操作. ...

vue-axios登录失效后，阻止其他请求

string佳佳的博客

02-23

3320

应用场景：用户登录太长时间token过期，导致后续请求异常，需要及时弹框提醒用户跳转到登录页重新登录。如果在全局axios做了弹出框提示处理，那么当token过期的后续请求接口有很多个时，弹出框对应的就会有很多个。这时我们就需要组织其他后续接口的请求，是弹框提示只弹出一次，提高用户体验。实现方法：亲测有效！原博地址 ......

vue axios 响应拦截 token失效导致出现多个提示框的

weixin_42562086的博客

04-09

1436

// 响应拦截器 let isToken=false request.interceptors.response.use((res)=>{ // 没错误返回200 错误·拦截 if (res.data.code ===200) { return res; }else if (res.data.code === 404){ router.push('/login') }else if(res.data.code === 1002

token到期时axios响应拦截信息提示并重定向到登录页解决方案

往事随风

09-22

1909

token到期时axios响应拦截信息提示并重定向到登录页解决方案

vue3 antdVue axios请求配置(全局提示，配合antd自带的加载动画实现请求动画)

逆风优雅的博客

06-15

1149

此请求配置结核 pinia 使用 antdVue 中的message和loading 实现接口请求时展示加载动画，接口请求失败后，全局提示错误信息。App.vue页面最外层包裹 antd加载动画，通过pinia控制是否展示加载动画。status配置代码。

vue在develop环境请求接口报错network error axioserror

09-04

在Vue的develop环境中，当我们使用axios库发送请求时，如果接口出现问题或者请求失败，可能会出现"network error"的错误提示，这是axios库自身的错误信息，表示网络错误。造成该错误的原因可能有以下几种： 1. 接口地址错误：请检查所请求的接口地址是否正确，包括域名、路径、请求方法等参数是否准确。 2. 接口跨域问题：默认情况下，浏览器是不允许跨域请求的，如果你的接口地址和你的前端页面不在同一个域名下，那么就会发生跨域问题。解决办法可以通过配置后端服务器允许跨域请求，或者使用代理进行跨域请求。 3. 接口服务器问题：可能是接口服务器宕机或者出现其他故障导致无法访问。你可以通过访问接口地址的方式来验证是否可以正常访问。 4. 网络连接问题：可能是你的网络不稳定或者断开了连接，导致无法请求接口。你可以尝试刷新页面或者重新连接网络来解决该问题。 5. 其他问题：如果以上的方法都没有解决问题，那么可能是其他未知的错误导致的。你可以查看浏览器的开发者工具，查看具体的错误信息，或者参考axios官方文档或者社区中的解决方案来进行排查和解决。总之，在develop环境中，当请求接口报错网络错误时，我们需要逐步排查错误的原因，并采取相应的解决办法来解决该问题。

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交