解决axios:"timeout of 5000ms exceeded"超时的问题

 更新时间:2022年08月03日 09:48:28   作者:前端@小菜  
这篇文章主要介绍了解决axios:"timeout of 5000ms exceeded"超时的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

axios:"timeout of 5000ms exceeded"超时

最近遇到一个问题,在我开机后,启动后台服务器登录程序时会报请求超时的问题。网上找了下解决方法,最后成功解决。

首先,我们要查看自己的请求地址是否正确,后端是否正常开启,数据库是否启动;若都正确无误,则继续往下看。

在看以下代码时,大家可以参考我的另一篇文章:vue开发中 axios 的封装

注:我使用的是 0.18.1 版本,0.19.0 版本似乎有问题,见:https://github.com/ly2011/blog/issues/159 中的评论。

具体代码如下: 

import axios from 'axios'
import { BASE_URL } from './http'
import router from '../router'
 
// create an axios instance
const service = axios.create({
  baseURL: BASE_URL, // url = base url + request url
  // withCredentials: true, // send cookies when cross-domain requests
  timeout: 5000 // request timeout
})
 
 
// 设置请求次数,请求的间隙
service.defaults.retry = 4;
service.defaults.retryDelay = 1000;
 
// request interceptor
service.interceptors.request.use(
  config => {
    // do something before request is sent
    return config
  },
  error => {
    // do something with request error
    // console.log(error) // for debug
    return Promise.reject(error)
  }
)
 
// response interceptor
service.interceptors.response.use(
  response => {
    const res = response.data
    return res
  },
  error => {
    if (error.response) {
      // console.log('err' + error) // for debug
      switch (error.response.status) {
        case 401:
          // console.log('err status' + error.response.status)
          router.push('/login')
          break
        case 404:
          break
        case 500:
          break
      }
      return Promise.reject(error)
    } else {
      // 处理超时的情况
      let config = error.config
      // If config does not exist or the retry option is not set, reject
      if(!config || !config.retry) return Promise.reject(error)
  
      // Set the variable for keeping track of the retry count
      config.__retryCount = config.__retryCount || 0
  
      // Check if we've maxed out the total number of retries
      if(config.__retryCount >= config.retry) {
        // Reject with the error
        return Promise.reject(error)
      }
  
      // Increase the retry count
      config.__retryCount += 1
  
      // Create new promise to handle exponential backoff
      let backoff = new Promise(function(resolve) {
        setTimeout(function() {
          resolve()
        }, config.retryDelay || 1)
      })
  
      // Return the promise in which recalls axios to retry the request
      return backoff.then(function() {
        return service(config)
      })
    }
 
  }
)
 
export default service

当请求超时后,axios 将重新发起请求,请求次数和间隙可以自己设定。

这里我创建了一个 axios 实例,所有 api 接口都通过这个实例进行请求。

如果你不想这样做,可以像下面这样写:

//在main.js设置全局的请求次数,请求的间隙
axios.defaults.retry = 4;
axios.defaults.retryDelay = 1000;
 
axios.interceptors.response.use(undefined, function axiosRetryInterceptor(err) {
    var config = err.config;
    // If config does not exist or the retry option is not set, reject
    if(!config || !config.retry) return Promise.reject(err);
 
    // Set the variable for keeping track of the retry count
    config.__retryCount = config.__retryCount || 0;
 
    // Check if we've maxed out the total number of retries
    if(config.__retryCount >= config.retry) {
        // Reject with the error
        return Promise.reject(err);
    }
 
    // Increase the retry count
    config.__retryCount += 1;
 
    // Create new promise to handle exponential backoff
    var backoff = new Promise(function(resolve) {
        setTimeout(function() {
            resolve();
        }, config.retryDelay || 1);
    });
 
    // Return the promise in which recalls axios to retry the request
    return backoff.then(function() {
        return axios(config);
    });
});

参考链接:https://github.com/axios/axios/issues/164

报错 Error: timeout of 5000ms exceeded

在确定后端代码没有问题,锁定前端

修改 \src\utils 目录下的 request.js

修改timeout属性值

有需要以后再来优化

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue项目完成后如何实现项目优化的示例

    vue项目完成后如何实现项目优化的示例

    本文主要介绍了vue项目完成后如何实现项目优化的示例,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-12-12
  • 浅谈Vue static 静态资源路径 和 style问题

    浅谈Vue static 静态资源路径 和 style问题

    这篇文章主要介绍了浅谈Vue static 静态资源路径 和 style问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • vue3+vite中使用import.meta.glob的操作代码

    vue3+vite中使用import.meta.glob的操作代码

    在vue2的时候,我们一般引入多个js或者其他文件,一般使用  require.context 来引入多个不同的文件,但是vite中是不支持 require的,他推出了一个功能用import.meta.glob来引入多个,单个的文件,下面通过本文介绍vue3+vite中使用import.meta.glob,需要的朋友可以参考下
    2022-11-11
  • Vue组件生命周期三个阶段全面总结讲解

    Vue组件生命周期三个阶段全面总结讲解

    Vue的生命周期就是vue实例从创建到销毁的全过程,也就是new Vue() 开始就是vue生命周期的开始。Vue 实例有⼀个完整的⽣命周期,也就是从开始创建、初始化数据、编译模版、挂载Dom -> 渲染、更新 -> 渲染、卸载 等⼀系列过程,称这是Vue的⽣命周期
    2022-11-11
  • vue3 element plus table selection展示数据,默认选中功能方式

    vue3 element plus table selection展示数据,默认选中功能方式

    这篇文章主要介绍了vue3 element plus table selection展示数据,默认选中功能方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-07-07
  • 使用Vue.js和MJML创建响应式电子邮件

    使用Vue.js和MJML创建响应式电子邮件

    这篇文章主要介绍了使用Vue.js和MJML创建响应式电子邮件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03
  • 详解vue通过NGINX部署在子目录或者二级目录实践

    详解vue通过NGINX部署在子目录或者二级目录实践

    这篇文章主要介绍了详解vue通过NGINX部署在子目录或者二级目录实践,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • Vue package.json配置深入分析

    Vue package.json配置深入分析

    这篇文章主要介绍了Vue package.json配置,package.json是每个前端项目都会有的json文件,位于项目的根目录中。很多脚手架在创建项目的时候会帮我们自动初始化好 package.json
    2023-01-01
  • vue3搭配pinia的踩坑实战记录

    vue3搭配pinia的踩坑实战记录

    Pinia是一个同时支持Vue2和Vue3的应用状态管理工具,简单来说就是为了管理整个应用中的响应式数据,解决各个组件交互时数据状态的不好管理的问题,下面这篇文章主要给大家介绍了关于vue3搭配pinia踩坑的相关资料,需要的朋友可以参考下
    2022-04-04
  • Vue中的反向代理

    Vue中的反向代理

    这篇文章主要介绍了Vue中的反向代理,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01

最新评论