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

SpringBoot+VUE+Axios 【链接超时】 后端正常返回结果,前端却出现错误无法接收数据

一、错误原因及解决思路

错误提示表明前端发送的请求在默认的 2500ms 超时时间内没有得到服务器的响应,导致请求失败。尝试以下方法来解决这个问题:

  1. 增加请求超时时间:可以通过配置 Axios 请求对象的 timeout 属性来增加请求的超时时间,例如将其设置为 5000ms。
  2. 检查网络连接:如果网络连接存在问题,可能会导致请求响应不及时或超时。请确保网络连接稳定,并且没有防火墙或代理服务器阻止了请求的传输。
  3. 削减请求数据量:如果正在向服务器发送大量数据,可能会导致请求响应时间过长。请检查发送的请求数据,考虑削减其数据量或者优化其结构。
  4. 检查服务器状态:如果服务器存在负载过重或性能问题,可能会导致请求响应时间延迟或超时。请确保服务器状态正常,并且可以处理发送的请求。

通过以上方法中的任意一种或多种,都可以尝试解决 Vue 前端发送请求超时的问题。

二、我的解决方案

上下文环境: SpringBoot+VUE+Axios,前端发送请求,后端接收后向用户邮件发送验证码,邮件发送完毕,后端给前端反馈。

出现链接超时的原因: 后端发送邮件耗时长,超过了axios默认的超时时间

解决方案: 设置axios超时时间为更长的时间

原请求方法为:

this.$axios.post("http://localhost:xxxx/oa/user/sendEmailVerCode",param).then(rst => {this.emailCodeForm.afterEndCode = rst.data;this.emailCodeForm.sendCodeFlag=true;// 已发送验证码console.log(rst.data)}).catch(ex => {console.log(ex);});

在使用 $axios 发送请求时,通过配置 timeout 属性来增加请求的超时时间。具体实现方法如下:

this.$axios.post("http://localhost:xxxx/oa/user/sendEmailVerCode", param, {// 将超时时间设置为 20000mstimeout: 20000,}).then((rst) => {this.emailCodeForm.afterEndCode = rst.data;this.emailCodeForm.sendCodeFlag = true; // 已发送验证码console.log(rst.data);}).catch((ex) => {console.log(ex);});

在上述代码中,我们在 $axios.post() 方法的第三个参数中,将 timeout 属性设置为 20000ms,这意味着如果请求在 20000ms 内没有得到响应,Axios 会自动将其视为超时错误并返回一个错误信息。然后,我们可以通过 .then().catch() 方法处理请求的响应结果和错误信息。

需要注意的是,也可以在创建全局的 $axios 实例时设置默认的超时时间,例如:

import axios from 'axios';const instance = axios.create({baseURL: 'http://localhost:xxxx',timeout: 20000, // 默认的超时时间
});export default ({ app }, inject) => {inject('axios', instance);
};

相关文章:

SpringBoot+VUE+Axios 【链接超时】 后端正常返回结果,前端却出现错误无法接收数据

一、错误原因及解决思路 错误提示表明前端发送的请求在默认的 2500ms 超时时间内没有得到服务器的响应,导致请求失败。尝试以下方法来解决这个问题: 增加请求超时时间:可以通过配置 Axios 请求对象的 timeout 属性来增加请求的超时时间&…...

【状态估计】基于增强数值稳定性的无迹卡尔曼滤波多机电力系统动态状态估计(Matlab代码实现)

💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势:🌞🌞🌞博客内容尽量做到思维缜密,逻辑清晰,为了方便读者。 ⛳️座右铭&a…...

快速排序的简单理解

详细描述 快速排序通过一趟排序将待排序列分割成独立的两部分,其中一部分序列的关键字均比另一部分序列的关键字小,则可分别对这两部分序列继续进行排序,以达到整个序列有序的目的。 快速排序详细的执行步骤如下: 从序列中挑出…...

短视频多平台发布软件功能详解

随着移动互联网的普及和短视频的兴起,短视频发布软件越来越受到人们的关注。短视频发布软件除了常规的短视频发布功能,还拥有智能创作、帐号绑定、短视频一键发布、视频任务管理和数据统计等一系列实用功能。下面我们将分步骤详细介绍一下这些功能。   …...

谷歌人机验证Google reCAPTCHA

reCAPTCHA是Google公司推出的一项验证服务,使用十分方便快捷,在国外许多网站上均有使用。它与许多其他的人机验证方式不同,它极少需要用户进行各种识图验证。 它的使用方式如下如所示,只需勾选复选框即可通过人机验证。 虽然简单…...

VB+ACCESS电脑销售系统的设计与实现

为了使此系统简单易学易用、功能强大、软件费用支出低、见效快等特点,我们选择Visual Basic6.0开发此系统。Visual Basic6.0起代码有效率以达到Visual c的水平。在面向对象程序设计方面,Visual Basic6.0全面支持面向对你程序设计包括数据抽象、封装、对象…...

嵌入式开发:硬件和软件越来越接近

从前,硬件和软件工程师大多生活在自己的世界里。硬件团队设计了芯片,调试了从铸造厂返回的第一批样本,让软件团队测试他们的代码。随着虚拟平台和其他可执行模型变得越来越普遍,软件团队可以在芯片制造之前开始,有时甚…...

亲测:腾讯云轻量应用服务器性能如何?

腾讯云轻量应用服务器性能评测,轻量服务器CPU主频、处理器型号、公网带宽、月流量、Ping值测速、磁盘IO读写及使用限制,轻量应用服务器CPU内存性能和标准型云服务器CVM处于同一水准,所以大家不要担心轻量应用服务器的性能,腾讯云百…...

编程语言,TIOBE 4 月榜单:黑马出现了

TIOBE 4 月榜单已经发布了,一起来看看这个月编程语言排行榜有什么变化吧! C 发展依旧迅猛 在本月榜单中,TOP 20 的变动不大,Python、C、Java 、 C 和C#依然占据前五。甚至排名顺序都和上个月一样没有变动。 同时,Rus…...

基于DSP+FPGA的机载雷达伺服控制系统(二)电源仿真

板级电源分配网络的分析与仿真在硬件电路设计中,电源系统的设计是关键步骤之一,良好的电源系统为电路板 上各种信号的传输提供了保障。本章将研究电源完整性的相关问题,并提出一系列改 进电源质量的措施。 3.1 电源完整性 电源完整性&#xf…...

SpringBoot整合Redis、以及缓存穿透、缓存雪崩、缓存击穿的理解分布式情况下如何添加分布式锁 【续篇】

文章目录前言1、分布式情况下如何加锁2、具体实现过程3、测试3.1 一个服务按照多个端口同时启动3.2 使用jmeter进行压测前言 上一篇实现了单体应用下如何上锁,这一篇主要说明如何在分布式场景下上锁 上一篇地址:加锁 1、分布式情况下如何加锁 需要注意的点是: 在上锁和释放…...

优漫动游告诉你:平面设计适合你吗?

优漫动游告诉你:平面设计适合你吗? 什么样的同学可以适应平面设计这份工作呢?   略微有美术基础,当然功底越深越加分。   2.对色彩、形状、结构有一定的接纳力。   3.对图案、人像、字体等因素有审美辨别的能力…...

在Vue中,为什么从 props 中解构变量之后再watch它,无法检测到它的变化?

例如下面这段代码,msg无法被watch import { watch } from vue;export default {props: {msg: String},setup(props) {// 从 props 中解构 msgconst { msg } props;watch(() > msg,(newVal, oldVal) > {console.log(newVal, newVal);console.log(oldVal, old…...

[源码解析]socket系统调用上

文章目录socket函数API内核源码sock_createinet_createsock_allocsock_map_fd相关数据结构本文将以socket函数为例,分析它在Linux5.12.10内核中的实现,先观此图,宏观上把握它在内核中的函数调用关系:socket函数API socket 函数原…...

Jenkins部署与自动化构建

Jenkins笔记 文章目录Jenkins笔记[toc]一、安装Jenkinsdocker 安装 JenkinsJava启动war包直接安装二、配置mavenGit自动构建jar包三、自动化发布到测试服务器运行超时机制数据流重定向编写清理Shell脚本四、构建触发器1. 生成API token2. Jenkins项目配置触发器3. 远程Git仓库配…...

网络编程三要素

网络编程三要素 IP、端口号、协议 三要素分别代表什么 ip:设备在网络中的地址,是唯一的标识 端口号:应用程序在设备中的唯一标识 协议:数据在网络中传输的规则 常见的协议有UDP、TCP、http、https、ftp ip:IPv4和…...

如何编写一个自己的web前端脚手架

脚手架简介 脚手架是创建前端项目的命令行工具,集成了常用的功能和配置,方便我们快速搭建项目,目前网络上也有很多可供选择的脚手架。 一个"简单脚手架"的构成其实非常少,即 代码模板 命令行工具。其中代码模板是脚手…...

计算机网络第1章(概述)

文章目录1.1、计算机网络在信息时代的作用1.2、因特网概述1、网络、互连网(互联网)和因特网2、因特网发展的三个阶段3、因特网的标准化工作4、因特网的组成1.3 三种交换方式1、电路交换(Circuit Switching)2、分组交换&#xff08…...

grid布局

一、概述 CSS Grid 布局是 CSS 中最强大的布局系统。与 flexbox 的一维布局系统不同,CSS Grid 布局是一个二维布局系统,也就意味着它可以同时处理列和行。通过将 CSS 规则应用于 父元素 (成为 Grid Container 网格容器)和其 子元素(成为 Gri…...

博客平台打造出色的个人资料管理与展示:实用技巧与代码示例

个人资料管理与展示是博客平台的重要功能之一。本文将通过设计思路、技术实现和代码示例,详细讲解如何构建出色的个人资料管理与展示功能。结合CodeInsight平台的实践案例,帮助您深入了解个人资料管理与展示的设计原则和技术实现。 一、设计思路 在设计…...

【位运算】消失的两个数字(hard)

消失的两个数字(hard) 题⽬描述:解法(位运算):Java 算法代码:更简便代码 题⽬链接:⾯试题 17.19. 消失的两个数字 题⽬描述: 给定⼀个数组,包含从 1 到 N 所有…...

ESP32读取DHT11温湿度数据

芯片:ESP32 环境:Arduino 一、安装DHT11传感器库 红框的库,别安装错了 二、代码 注意,DATA口要连接在D15上 #include "DHT.h" // 包含DHT库#define DHTPIN 15 // 定义DHT11数据引脚连接到ESP32的GPIO15 #define D…...

转转集团旗下首家二手多品类循环仓店“超级转转”开业

6月9日,国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。 转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。 据「TMT星球」了解,“超级…...

生成 Git SSH 证书

🔑 1. ​​生成 SSH 密钥对​​ 在终端(Windows 使用 Git Bash,Mac/Linux 使用 Terminal)执行命令: ssh-keygen -t rsa -b 4096 -C "your_emailexample.com" ​​参数说明​​: -t rsa&#x…...

从零开始打造 OpenSTLinux 6.6 Yocto 系统(基于STM32CubeMX)(九)

设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile,新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...

智能分布式爬虫的数据处理流水线优化:基于深度强化学习的数据质量控制

在数字化浪潮席卷全球的今天,数据已成为企业和研究机构的核心资产。智能分布式爬虫作为高效的数据采集工具,在大规模数据获取中发挥着关键作用。然而,传统的数据处理流水线在面对复杂多变的网络环境和海量异构数据时,常出现数据质…...

让回归模型不再被异常值“带跑偏“,MSE和Cauchy损失函数在噪声数据环境下的实战对比

在机器学习的回归分析中,损失函数的选择对模型性能具有决定性影响。均方误差(MSE)作为经典的损失函数,在处理干净数据时表现优异,但在面对包含异常值的噪声数据时,其对大误差的二次惩罚机制往往导致模型参数…...

push [特殊字符] present

push 🆚 present 前言present和dismiss特点代码演示 push和pop特点代码演示 前言 在 iOS 开发中,push 和 present 是两种不同的视图控制器切换方式,它们有着显著的区别。 present和dismiss 特点 在当前控制器上方新建视图层级需要手动调用…...

在 Spring Boot 中使用 JSP

jsp&#xff1f; 好多年没用了。重新整一下 还费了点时间&#xff0c;记录一下。 项目结构&#xff1a; pom: <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://ww…...

学习一下用鸿蒙​​DevEco Studio HarmonyOS5实现百度地图

在鸿蒙&#xff08;HarmonyOS5&#xff09;中集成百度地图&#xff0c;可以通过以下步骤和技术方案实现。结合鸿蒙的分布式能力和百度地图的API&#xff0c;可以构建跨设备的定位、导航和地图展示功能。 ​​1. 鸿蒙环境准备​​ ​​开发工具​​&#xff1a;下载安装 ​​De…...