产生的原因
产生这种错误的原因很多，其中之一是请求没有返回数据。笔者自己写了一个自动补全JS脚本，为了减少数据库的访问次数，以减小数据库压力在字段补全访问数据库时设置了字符长度，当大于某个值时才去访问数据库，由于字段补全功能是可以中文与数字都可以进行补全，所在在前端设置了一个字符就可以触发Axios请求，在后台则对数字达到某种要求后访问数据库，带来的问题就是AxiosError: timeout of 8000ms exceeded刚开始并没有注意到此问题。以为把timeout的值设置大一些就可以了，没有想到的是不行，于是笔者才开始重视起此问题，翻了网上的一些解决方法，基本上都是设置timeout的值来解决可是到了笔者这里却不行，于是对本问题进行了研究，笔者认为这是Axios的机制所为，是没有请求成功所造成。在笔者代码中为请求不成功做了设置具体代码如下：
下面展示一些 js片断。
// 添加响应拦截
_AXIOS.interceptors.response.use(undefined, function axiosRetryInterceptor(err) {
var config = err.config;
// 如果config不存在或没有设置重试选项，则拒绝
if (!config || !config.retry) return Promise.reject(err);
// 设置用于跟踪重试计数的变量
config.__retryCount = config.__retryCount || 0;
//检查我们是否已经把重试的总次数加到了最大值
if (config.__retryCount >= config.retry) {
// Reject with the error
return Promise.reject(err);
}
// 增加重试次数
config.__retryCount += 1;
var backoff = new Promise(function (resolve) {
setTimeout(function () {
resolve();
}, config.retryDelay || 1);
});
// 返回调用axios以重试请求的promise
return backoff.then(function () {
return _AXIOS(config);
});
});
以上解决方法是一国外网站的解决方法，当请求不成功就会再次发送请求到服务端。可是笔者所发送的请求是被人为的打断的，服务服务端代码如下：
下面展示一些 js代码片。
if (!isNaN(parseInt(xh)) && isFinite(xh)) {
if (xh.length >= 3) {
selectSql = 'USE [SecondSubjects] SELECT DISTINCT [xh], [kcmc] FROM layout_17c01 WHERE [xh] like' + "'" + xh + "%" + "'";
} else {
return;
}
} else {
selectSql = 'USE [SecondSubjects] SELECT DISTINCT [kcmc],[xh] FROM layout_17c01 WHERE [kcmc] like' + "'" + xh + "%" + "'";
}
可以看到当为数字请求服务器的时候大于3后才去访问数据库，本来是想减少数据库的访问次数所设，当小于3位数的时候笔者简单粗暴的一个return带来的后果就是AxiosError: timeout of 8000ms exceeded
如下图所示：
即使将timeout的值设置为8000也一样不管用。上图笔者为了快点显示错误将timeout的值更改成为1000
解决方法
仔细想了一下这一问题的出现原因。发现Axios请求在不断的发送如下图所示：
可以发现不断请求的状态码没有，说明服务端没有返回数据给前端是造成AxiosError: timeout of 8000ms exceeded的罪魁祸首，于是更改代码为下：
下面展示一些 js代码片。
if (!isNaN(parseInt(xh)) && isFinite(xh)) {
if (xh.length >= 3) {
selectSql = 'USE [SecondSubjects] SELECT DISTINCT [xh], [kcmc] FROM layout_17c01 WHERE [xh] like' + "'" + xh + "%" + "'";
} else {
var message = '考试地址大于3位数后才会查询,继续努力....';
return res.send(new failed(message));
}
} else {
selectSql = 'USE [SecondSubjects] SELECT DISTINCT [kcmc],[xh] FROM layout_17c01 WHERE [kcmc] like' + "'" + xh + "%" + "'";
}
将return更改为
下面展示一些 js代码片。
var message = '考试地址大于3位数后才会查询,继续努力....';
return res.send(new failed(message));
再看发送请求结果：
可以看到complete-17C08-ksdd再没有红字出现，说明发送都是成功的，问题解决。