用户体验：前端处理数据加载超时的方法

比如后端一个加载，在加载处理后，接口有问题或者数据庞大等等原因，造成页面一直loading，这样很不好，我们应该给它加个超时处理，提醒用户继续操作其他，避免一直卡在这个页面。

一般我们会弄个2分钟的加载，如果超过就会提示“超时提示”。如何实现呢？我们拿微信小程序里的一段代码来说：

getOrderUserInfo(){
    wx.showLoading({
      title: '加载中...',
      icon:'none'
    })
    
    let requestTimeout = false; // 使用局部变量
    
    // 设置超时定时器（2分钟 = 120000毫秒）
    const timeoutTimer = setTimeout(() => {
      wx.hideLoading();
      wx.showToast({
        title: '请求超时，请重试~',
        icon: 'none'
      });
      requestTimeout = true; // 标记为超时
    }, 120000);
    
    orderUserInfo()
    .then( res => {
      // 清除超时定时器
      clearTimeout(timeoutTimer);
      
      // 如果已经超时，不再执行后续逻辑
      if (requestTimeout) return;
      
      if(res?.code === 200){   
        wx.hideLoading();
        // ... 其余代码保持不变
      }
    })
    .catch(error => {
      // 清除超时定时器
      clearTimeout(timeoutTimer);
      
      // 如果已经超时，不再执行后续逻辑
      if (requestTimeout) return;
      
      // ... 其余代码保持不变
    })
  },

比如，我们设置一个timeoutTimer定时器。