【MoodVine】Taro+React对于大文件的轮询请求实现

在之前的博客中,我们通过promise延迟对音频资源的访问,给其足够的加载时间,但是由于资源大小的不确定,5s的等待时间对于大部分较短音频来说太长了;而对于部分较长回答,5s也不足以加载完成,笨人不想做分块,所以想通过轮询访问来动态调整加载时间,优化访问速度

方案核心设计

  1. 智能轮询机制
    • 使用递归 Promise 实现自动重试
    • 指数退避策略避免服务器过载
    • 最大尝试次数限制防止无限循环
  2. 双层检测优化
  1. 自适应策略
    • 初始延迟:1秒(小资源快速响应)
    • 指数退避:每次失败等待时间加倍(最大到30秒)
    • 智能判断:针对404错误特殊处理,其他错误保持短间隔
  2. 错误处理增强
    • 区分临时错误和永久错误
    • 详细日志记录每次尝试状态
    • 最终聚合错误信息

最终实现如下

javascript 复制代码
function smartResourceLoader(url, maxAttempts = 10, initialDelay = 1000) {
  return new Promise(async (resolve, reject) => {
    let attempt = 0;
    let delayTime = initialDelay;
    
    const attemptLoad = async () => {
      attempt++;
      try {
        console.log(`尝试加载资源 (第 ${attempt} 次): ${url}`);
        
        // 先检查资源是否存在(使用HEAD请求减少带宽消耗)
        const headRes = await Taro.request({
          url,
          method: 'HEAD',
          timeout: 3000
        });
        
        if (headRes.statusCode === 404) {
          throw new Error('资源尚未就绪 (404)');
        }
        
        // 资源存在时才执行完整操作
        handleAudioToggle(url);
        console.log(`资源加载成功: ${url}`);
        resolve();
      } catch (error) {
        console.warn(`资源加载失败: ${error.message}`);
        
        // 指数退避策略:每次失败后等待时间加倍
        delayTime *= 2;
        
        if (attempt >= maxAttempts) {
          reject(new Error(`资源加载失败,超过最大尝试次数 (${maxAttempts}次)`));
          return;
        }
        
        // 智能等待:根据错误类型调整策略
        const nextDelay = error.message.includes('404') ? delayTime : 1000;
        console.log(`等待 ${nextDelay}ms 后重试...`);
        
        await new Promise(res => setTimeout(res, nextDelay));
        attemptLoad();
      }
    };
    
    attemptLoad();
  });
}
相关推荐
_Kayo_15 分钟前
VUE2 学习笔记14 nextTick、过渡与动画
javascript·笔记·学习
路光.44 分钟前
触发事件,按钮loading状态,封装hooks
前端·typescript·vue3hooks
我爱996!1 小时前
SpringMVC——响应
java·服务器·前端
咔咔一顿操作2 小时前
Vue 3 入门教程7 - 状态管理工具 Pinia
前端·javascript·vue.js·vue3
kk爱闹2 小时前
用el-table实现的可编辑的动态表格组件
前端·vue.js
漂流瓶jz3 小时前
JavaScript语法树简介:AST/CST/词法/语法分析/ESTree/生成工具
前端·javascript·编译原理
换日线°3 小时前
css 不错的按钮动画
前端·css·微信小程序
风象南3 小时前
前端渲染三国杀:SSR、SPA、SSG
前端
90后的晨仔3 小时前
表单输入绑定详解:Vue 中的 v-model 实践指南
前端·vue.js