how to avoid (or handle) http 429 programmatically-CodePudding

I have a page with a lot of <img> tags (I am assembling this page programmatically). Inevitably some of the requests for image encounter http 429. Thankfully, the remote server sends a bunch of helpful response headers as follows

HTTP/1.1 429 TOO MANY REQUESTS
X-RateLimit-Limit: 20
X-RateLimit-Remaining: 20
X-RateLimit-Reset: 1646307858.32
Retry-After: 1

I am wondering if I could somehow wrap my <img> tags in code that catches the http response.status and then uses the above headers (for example, the Retry-After header) to ask for the failed image again after a set delay.

Logically, it seems to me the above would work, but I can't figure out how to code this. Fwiw, this is a completely client-side web page.

Thanks in advance for any guidance.

CodePudding user response：

try something like this

window.addEventListener("DOMContentLoaded", function() {
  const images = document.querySelectorAll("img[data-src]");
  let cnt = 0;

  const loadImage = src => {
    let img = new Image();
    let tgtImage = images[cnt];
    img.addEventListener("load", function() {
      tgtImage.src = this.src
    })
    img.addEventListener("error", function() {
      setTimeout(function() {
        loadImage(`${src}`)
      }, 1000)
    })
    img.src = src;
    cnt  
    if (cnt >= images.length) return;
    loadImage(images[cnt].dataset.src)
  }
  loadImage(images[cnt].dataset.src)
})

<img src="https://dummyimage.com/200x300&text=placeholder" data-src="https://dummyimage.com/200x300&text=image1" />
<img src="https://dummyimage.com/200x300&text=placeholder" data-src="https://dummyimage.com/200x300&text=image2" />
<img src="https://dummyimage.com/200x300&text=placeholder" data-src="https://ERROR.com/200x300&text=image3" />
<img src="https://dummyimage.com/200x300&text=placeholder" data-src="https://dummyimage.com/200x300&text=image4" />

CodePudding user response：

the following worked for me

<img 
   src="${uri}" 
   one rror="this.onerror=null; setTimeout(() => { this.src='${uri}' },1000);">

thanks @spender for the hint. Thanks also to mplungjan for an alternative solution that is useful to know even if it is not for me at this point.