检查图像是否存在会产生403错误

时间:2019-09-05 11:03:39

标签: javascript jquery get

我拥有一系列托管图片,但是数量和网址可以更改。但是,它们始终遵循相同的递增命名约定。为了存储存在的图像,我循环浏览可用的图像,直到遇到错误。到那时,我将存储结果并继续进行操作。

function checkForExistingImage(u, r = [], i = 0){

    var url = u + i;

    $.get(url).done(function() { 
        r.push(url);
        checkForExistingImage(u, r, i + 1);
    }).fail(function(){
        //continue working with the 'r' array
    });
}

但是,这将始终在控制台中导致403(找不到图像)错误,因为最后检查的图像将永远不存在。

我如何不触发此错误,或者在需要时抑制它?

1 个答案:

答案 0 :(得分:0)

我肯定会以更加文明的方式来重写它。此功能不会记录console.log明确记录的错误之外的任何错误(可以删除)。

使用此方法应该更安全,因为它不会以每秒过多的请求轰炸服务器,但是如果没有问题,您可以减少或删除超时。

function Timeout(time) {
  return new Promise(function(resolve) {setTimeout(resolve, time);});
}

async function checkForExistingImages(baseUrl, maxImages, startImage = 0) {
  const results = [];
  // Some sanity check on params
  if(maxImages < startImage) {
    let tmp = maxImages;
    maxImages = startImage + 1;
    startImage = maxImages;
  }
  // from i to max
  for(let i=startImage; i<maxImages; ++i) {
    // Create image URL, change this as needed
    const imageURL = baseUrl + i + ".png";
    // `fetch` does not throw usually, but we wanted to avoid errors in console
    try {
      // Response will have 200/404/403 or something else
      const response = await fetch(imageURL);
      if(response.status == 200) {
        results.push(imageURL);
      }
      else {
        console.info("Image",imageURL,"was removed.");
        // stop loading
        break;
      }
    }
    // complete failure, some major error occured
    catch(e) {
      console.warn("Image",imageURL, "failed to send request!");
      break;
    }
    // If you're getting throttled by the server, use timeout
    await Timeout(200);
  }
  return results;
}