Как отправлять запрос каждые N секунд, пока в ответ не получу нужный статус?

Question

[inkShio]

Форма отправляет все на search.php получаю id, этот id отправляю в status.php. В ответ получаю

{
    "search_ready": false
}

И вот мне надо сделать, чтобы запрос на проверку статуса отправлялся каждые 5 сек, на проверку статуса, пока не получу "search_ready": true. Не могу сообразить как. Подскажите в какую сторону копать.

document.addEventListener("DOMContentLoaded", () => {
  if (document.querySelector("#word")) {
    const forms = document.querySelectorAll("#word");

    forms.forEach((form) => {
      form.addEventListener("submit", function (e) {
        e.preventDefault();
        const formData = new FormData(this);

        fetch('search.php', {
          method: 'POST',
          body: formData
        })
        .then(res => res.json())
        .then(search => fetch('status.php', {
            method: 'POST',
            body: JSON.stringify(search)
          })
        )
        .then(res => res.json())
        .then(status => {
          console.log(status);
        })
        // и т.д.
      });
    });
  }
});

Comments

[Алексей Уколов]

document.querySelectorAll("#word");

Отдаёт бессмыслицей. Идентификатор должен быть на странице только один - зачем использовать querySelectorAll?

Answer 1

[0xD34F]

Асинхронная функция, внутри бесконечный цикл, в цикле запрос. Если результат запроса нас устраивает - выходим из цикла. Задержка между итерациями цикла реализуется с помощью промиса, который резолвится по таймауту.

async function() {
  let result = null;

  while (1) {
    result = await fetch(...);

    if (result тот, который нужен) {
      break;
    }

    await new Promise(r => setTimeout(r, 5000));
  }

  return result;
}

Comments

[historydev]

Круто придумано с промисом

[inkShio]

0xD34F , в общем цикл работает, но не останавливается, от status.php я получаю то что надо, через несколько запросов:

а вот результат в консоли такой

Не пойму какой результат сюда вписать

if (result тот, который нужен) {
      break;
    }

что бы остановилось.

[0xD34F]

inkShio, это вам виднее, что туда вписывать. Думайте.

[RAX7]

inkShio, https://developer.mozilla.org/en-US/docs/Web/API/R...

[maksam07]

Даже захотелось сохранить ответ, вдруг пригодится

[inkShio]

0xD34F, RAX7, да мозг уже не варил ) Все сделал, спасибо.

Answer 2

[Rsa97]

setInterval / clearInterval

Comments

[Сергей Соколов]

интервал плох независимостью от предыдущей итерации:
если запрос выполняется 800 мс, а интервал всего 300 мс, например..

Answer 3

[historydev]

const interval = setInterval(() => {
fetch('search.php', {
          method: 'POST',
          body: formData
        })
        .then(res => res.json())
        .then(search => fetch('status.php', {
            method: 'POST',
            body: JSON.stringify(search)
          })
        )
        .then(res => res.json())
        .then(status => {
if(status === 200) clearInterval(interval)
          console.log(status);
        })
}, 300);

Comments

[Сергей Соколов]

всё рухнет, если запрос выполняется дольше интервала

Answer 4

[rPman]

Настоятельно рекомендую такие задачи решать не через периодические опросы сервера, а через отсылку сервером сообщения ровно в момент окончания работы с помощью websocket (придется на сервере реализовывать или искать поддержку websocket, это не сложно, просто немного перевернет подход к разработке)

Например, на стороне бакэнда нужно будет запустить минимальный websocket сервер и http сервер (для коммуникации между бакэндами, так проще), который будет принимать http сообщения от основного бакэнда об изменениях в статусе и держать подключения от клиентов, выдавая в них изменения по статусам.

Недостаток подхода с периодическим опросом как у тебя - сильно растет нагрузка на бакэнд с ростом клиентов и лаг в реагировании на серверные события (в попытке уменьшить этот лаг будешь уменьшать интервал опроса и тем самым повышать нагрузку на бакэнд)