如何为THREE.js图片加载函数添加3次重试及默认返回值

直接给你改好的代码，核心是把单张图片的加载逻辑封装成带重试的独立函数，通过循环控制最多3次尝试（含首次），失败2次后返回默认数据：

async LoadData(newImages){
   const ids = newImages.map(el => el.id);
   const loader = new THREE.ImageBitmapLoader();   //from three.js library

   // 封装单张图片的加载+重试逻辑
   async function loadSingleImage(id) {
      const url = app_constants.SECOND_IMAGE_LIBRARY + id;
      const maxAttempts = 3; // 最多尝试3次（首次+2次重试）

      for (let attempt = 1; attempt <= maxAttempts; attempt++) {
         try {
            let image = await loader.loadAsync(url);
            
            let canvas = new OffscreenCanvas(image.width, image.height); 
            let context = canvas.getContext('2d'); 
            context.drawImage(image, 0, 0);
            
            let imageData = context.getImageData(0, 0, image.width, image.height);
                    
            const data = new Uint8Array(new SharedArrayBuffer(imageData.data.length));
            data.set(imageData.data, 0);
     
            // 清理资源
            image = canvas = context = imageData = null;
         
            return {id, data}; 
         } catch (error) {
            // 如果是最后一次尝试，返回默认数据
            if (attempt === maxAttempts) {
               console.warn(`加载图片${id}失败，已达最大尝试次数`, error);
               return {id, data: "not loaded"};
            }
            // 否则继续重试
            console.warn(`加载图片${id}失败，正在进行第${attempt+1}次尝试`, error);
         }
      }
   }
                
   const sharedImageDatas = await Promise.all(
      ids.map(id => loadSingleImage(id))
   );   
        
   return sharedImageDatas;         
}

关键逻辑说明 #

• 把单图加载逻辑抽成loadSingleImage函数，方便复用和集中处理重试
• 用for循环控制尝试次数，每次失败进入catch块，判断是否还有重试机会
• 仅当所有尝试都失败时，才返回data: "not loaded"的默认格式
• 保留了你原有的资源清理逻辑，避免Worker中出现内存泄漏
• 加入了警告日志，方便排查加载失败的具体原因

内容的提问来源于stack exchange，提问作者Spiri