记一次大屏某一处图像采集接口异常导致该页其他图表都无法显示问题解决

问题描述：

开发的大屏有一处实时感知数据区域，用于显示采集到的机器人的实时里程计相关传感器数据，以及机器人摄像头的实时图片帧。在没有对接这个接口时，该页大屏其他图表显示正常；在正常测试对接该接口时，各区域也都能实时显示数据。

因为机器人也无法实时一直开着，所以后续后端对接处理的服务就关闭了，也就没在关注。后面偶然一次关注该页大屏时，发现其他也图表都没有显示，且该页页面卡顿。

 

问题原因：

因为图片帧对接的后端接口无法建立连接（后面核实是机器人只在测试调试时才开启了后端该接口服务，其他时候该接口服务功能（如端口）是关闭的），导致前端大屏无法发送请求，连接被拒绝，然而，js如下代码片段：

 

if (usResult.code === 200 && usResult.success === true && !!usResult.data) {
    var requestParam = buildImageBindPayload(usResult);
    var urlarray = [];//存储websocket地址
    var channelResult;
    //通知构建采集通道
    $.ajax({
      type: 'POST',
      url: realtimedataurl + '/api/rosNodeManager/bindRos',
      data: JSON.stringify(requestParam),
      contentType: 'application/json',
      async: false,
      success: function (res) {
        channelResult = res;
      },
      error: function (xhr, status, error) {
        console.log('Error:', error);
        showConnectionStatus('通道地址API请求失败', 'error');
      }
    });
if (channelResult.code === 200 && channelResult.success === true && !!channelResult.data) {
      channelResult.data.forEach((item, index) => {
        urlarray[index] = item.websocketUrl
      });
      uswebsocketmode4Third(urlarray); //视频显示方法
    } else {
      showConnectionStatus('获取视频websocket地址失败，请检查数据采集反馈接口内容', 'error');
    }

  }

 

因为后端服务连接无法访问，所以请求直接进入error分支，并且channelResult也是null并没有任何后端接口返回的值，然后再执行图中：

if (channelResult.code === 200 && channelResult.success === true && !!channelResult.data)时就异常报错了，因为js无法获取channelResult.code信息（channelResult非正常情况赋值，里面没有code结构），才导致页面捕获到该异常卡在该区域图表函数，而该页其他图表的函数调用顺序是在当前图片帧图表的下方（之后），导致其他图表函数就没有被调用。

 

解决办法：

 方法1：

追加一个isError变量，初始值置为false;代表没有异常，一旦请求接口进入error分支（比如连接被拒绝，未开启接口服务等），就将isError置为true;

然后在请求接口代码段下方做判断，isError为true,直接结束。

修订后代码如下：

 

//-2（2）构建请求参数，并通知数据采集方采集并构建通道，接收返回的通道地址
  var isError = false;
  if (usResult.code === 200 && usResult.success === true && !!usResult.data) {
    var requestParam = buildImageBindPayload(usResult);
    //console.log('请求参数临时记忆：',JSON.stringify(requestParam));
    var urlarray = [];//存储websocket地址
    var channelResult;
    //通知构建采集通道
    $.ajax({
      type: 'POST',
      url: realtimedataurl + '/api/rosNodeManager/bindRos',
      data: JSON.stringify(requestParam),
      contentType: 'application/json',
      async: false,
      success: function (res) {
        channelResult = res;
      },
      error: function (xhr, status, error) {
        console.log('Error:', error);
        isError = true;
        showConnectionStatus('通道地址API请求失败', 'error');
      }
    });

    if(isError === true) return;

    if (channelResult.code === 200 && channelResult.success === true && !!channelResult.data) {
      channelResult.data.forEach((item, index) => {
        urlarray[index] = item.websocketUrl
      });
      uswebsocketmode4Third(urlarray); //视频显示方法
    } else {
      showConnectionStatus('获取视频websocket地址失败，请检查数据采集反馈接口内容', 'error');
    }

  }

方法2：

最简单，不关心函数内部的异常，直接在调用最顶级函数的地方，包一下try-catch即可。

如：

try { USDisplay4Third(); } catch (e) { }

// 在全局作用域定义定时器变量
let paramsDisplayTimer = null;
export function ThirdTab() {
  //
  $(function () {
    
    // 清除已存在的定时器
    if (paramsDisplayTimer !== null) {
      clearInterval(paramsDisplayTimer);
      paramsDisplayTimer = null;
    }
    // 立即执行一次，保证第一次能立即执行
    paramsDisplay();
    //try { paramsDisplay(); } catch (e) { }

    // 设置新的定时器
    paramsDisplayTimer = setInterval(function () {
      paramsDisplay();
      //try { paramsDisplay(); } catch (e) { }
    }, 1000);


    try { USDisplay4Third(); } catch (e) { }


    //第三页无人系统介绍
    //unmanned_system_introduce();
    try { unmanned_system_introduce(); } catch (e) { }

    //第三页地图
    //unmanned_system_map_openlayers();
    try { unmanned_system_map_openlayers(); } catch (e) { }

  })

}