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

缺乏、安全感 2023-09-26 20:13 91阅读 0赞

## 一、错误原因及解决思路 ##

错误提示表明前端发送的请求在默认的 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, {
        
        // 将超时时间设置为 20000ms
        timeout: 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);
    };