|
文章主要介绍的是页面504 Gateway Time-out 的解决思路
一、504 Gateway Time-out 原因？
因为浏览器访问接口请求，默认超时事件是1分钟，当遇到504接口超时，首先我们要看下 ajax接口请求是否设置了?timeout ，其次看下nginx是否设置了代理超时时间。
二、检查步骤
1.前端ajax设置
$.ajax({
url: '',//接口地址
type: 'post',//请求方式
data: postData,//请求参数
timeout: 1000*60*10,//设置超时时间为8s
success: function(data){
console.log(data)
},
complete:function(XHR,TextStatus){
if(TextStatus=='timeout'){ //超时执行的程序
console.log("请求超时！");
}
}
})
2.nginx代理超时设置
proxy_connect_timeout 600;
proxy_read_timeout 600;
proxy_send_timeout 600;
proxy_buffering off;
proxy_buffer_size 128k;
proxy_buffers 100 128k;
三、问题扩展（原生js封装ajax请求）
因为当时使用jquery的ajax请求，接口统一定义的dataType:json，由于接口返回的文件流，导致成功success回调没有触发，又不想修改dataType，因此使用原生js 封装ajax请求。
getAjax(url,callback){
var timeoutFlag=null;
var xhr=new XMLHttpRequest();
var url=""//请求路径，get请求可以把参数拼到地址里
xhr.open(type,url,async);//type请求类型 url地址 async是否异步请求
xhr.responseType='blob';//如果返回数据是文件流 可以设置为blob类型
xhr.timeout=1000*60*60;//超时时间 此处设置的一小时
xhr.setRequestHeader('token',token);//设置header token
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
window.clearTimeout(timeoutFlag);
if(xhr.status==200 || xhr.status==304){
callback(xhr.response);
}
}
}
xhr.send(data);//如果post请求 参数在此定义传递
timeoutFlag=window.setTimeout(function(){//计时器，超时后处理
window.clearTimeout(timeoutFlag);
xhr.abort();
},xhr.timeout);
}
//调用ajax
getAjax('URL',function(res){
//逻辑处理
})
感谢您的浏览，希望可以帮助到你，后续继续更新文章（不喜勿喷，哈哈）
|