解决axios:"timeout of 5000ms exceeded"超时的问题
作者:前端@小菜
这篇文章主要介绍了解决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属性值
有需要以后再来优化
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。