Как рекурсивно отправлять запрос на проверку изображения на сервере?

Question

На странице 10 изображений, необходимо отправить запрос к каждому, но только если предыдущий запрос отдал код 200 (то есть изображение найдено).

Похоже, что у меня второй запрос подвисает на первом изображении, когда отвисает, все оставшиеся изображения уже созданы на сервере и подгружает моментально.

Каждое изображение на сервере генерируется в 10-20 секунд:

function recur(m = 0, img = document.querySelectorAll('img')) {
    fetch(`/uploads/img${m + 1}.webp`).then(r => {
        if(r.status === 200) {
            img[m].src = r.url;
            m++
        }
        
        if(m < 10)
            setTimeout( _ => recur(m), 1000)
    });
}

const response = fetch(`/uploads/img${m + 1}.webp`);
console.log(response.status);

if (response.ok) {
    img[m].src = `/uploads/img${m + 1}.webp`;
    m++
}
setTimeout( _ => recur(m), 400)

Попробовал данный вариант — он вроде верно работает (запросы не подвисают).

Трудность в том, что я не знаю как код ответа достать из Promise...

Answer 1

Пока вы размышляете над правильным подходом к проверке, оставлю вам решение основанное на вашей первоначальной задумке. Обращаю внимание, что лучше сразу отправлять массив переменных (суфиксов) и определиться с числом попыток, чтобы контролировать ситуацию. Запрос при помощи HEAD отрабатывает практически моментально.

async function recursiveWhat(arr) {
  for (const item of arr) {
    const response = await fetch(`/uploads/img${item}.webp`, {method: 'HEAD'})
    if (response.ok) {
      const index = arr.indexOf(item);
      arr.splice(index, 1); // удаляем из массива проверок существующий файл
    }
  }
  setTimeout(() => {
    // через 3 секунды повторяем запрос если что-то осталось в массиве
    if (arr.length > 0 && --attempts >= 0) {
      console.log(`Попытка #${attempts}`);
      recursiveWhat(arr);
    } else {
      console.log('The END', arr);
    }
  }, 3000)
}

let attempts = 5; // число попыток 
const arr = [0,1,2,3,4,5]; // суфиксы для полноценного контроля опроса
recursiveWhat(arr);

БЛОГ НА HUSL

Как рекурсивно отправлять запрос на проверку изображения на сервере?

Ответы (1 шт):