请求超时的原因及解决方案(重复请求必见坑点及解决方案)

一、超时原因

1.网络不稳定：

//检测网络连接状态，如果网络不稳定，提示用户检查网络连接
if (navigator.onLine !== true) {
  console.log('网络连接异常，请检查网络');
}

2.请求时间过长：

//使用xhr对象来请求数据，若请求时间超过10s就视为超时
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
  if (this.readyState === 4 && this.status === 200) {
    console.log(xhr.responseText);
  }
};
xhr.timeout = 10000; //10秒
xhr.open('GET', 'request.php', true);
xhr.send();

3.服务器负载高：

//后端处理ajax请求时动态输出时间间隔信息
function foo() {
  ob_start();
  echo 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit.';
  usleep(200000);
  echo 'Aenean commodo ligula eget dolor. Aenean massa.';
  usleep(500000);
  echo 'Cum sociis natoque penatibus et magnis dis parturient montes.';
  usleep(700000);
  echo 'Nulla consequat massa quis enim.*';
  usleep(400000);
  echo 'Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.';
  usleep(800000);
echo 'In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.';
  echo "n" . ob_get_clean();
}

二、解决方案

1.优化网络连接：

//使用ping.js插件检测网络连通性
<script src="ping.js"></script>

2.设置请求超时时间：

//使用axios发送http请求，设置timeout参数为10秒
axios.get('/user', {
  timeout: 10000
}).then(function(response) {
  console.log(response);
}).catch(function(error) {
  console.log(error);
});

3.优化服务器处理能力：

//使用PHP的ob_flush()和flush()函数可以动态输出前端信息
function foo() {
  ob_start();
  echo 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit.';
  ob_flush(); flush();
  usleep(200000);
  echo 'Aenean commodo ligula eget dolor. Aenean massa.';
  ob_flush(); flush();
  usleep(500000);
  echo 'Cum sociis natoque penatibus et magnis dis parturient montes.';
  ob_flush(); flush();
  usleep(700000);
  echo 'Nulla consequat massa quis enim.*';
  ob_flush(); flush();
  usleep(400000);
  echo 'Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.';
  ob_flush(); flush();
  usleep(800000);
  echo 'In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.';
  ob_flush(); flush();
  echo "n" . ob_get_clean();
}

三、超时告警

1.前端告警：

//使用toastr.js插件，前端超时告警
<script src="toastr.js"></script>
toastr.options.timeOut = 5000; // 5秒
toastr.options.extendedTimeOut = 5000;
toastr.error('请求超时，请检查网络或联系管理员', '请求超时');

2.后端告警：

//服务器端可使用邮件、短信等方式通知管理员
function foo() {
  if ($elapsed_time > 10) {
    $msg = "请求耗时过长，当前时间为：".date('Y-m-d H:i:s').", 请求URI:".$_SERVER['REQUEST_URI'];
    mail('admin@demo.com', '请求超时告警', $msg);
  }
}