Запустится ли таймер после await в ES6 модуле?

Вопрос-ответ JavaScript
1

У меня есть функция, которая делает fetch нужного документа:

// ничего особенного, просто fetch и преобразование полученного json-а
async function fetchMelodyPassport(url) {
  const response = await fetch(url);
  const melody_passport_json = await response.json();
  return melody_passport_json.content.rendered;
}

И есть функция, которая в определённый момент её запускает:

async function createMelodyPassport() {
  let counter = 0;
  ..........
  const melodyPassport = await fetchMelodyPassport(url);

  const intervalId = setInterval(() => {
    if (!melodyPassport) {
      counter += 1;
      console.log(counter);

      if (counter == 7) {
        const error = preloader.preloader.querySelector(".music-preloader p");
        error.textContent = "Время ожидания превышено. Пожалуйста, перезагрузите страницу или вернитесь попозже";
return;
      }
    }

    clearInterval(intervalId)
  }, 1000);

  melody.innerHTML = melodyPassport;
}

Часть кода с setInterval - я бы хотел, чтобы если время загрузки затянулось больше 7 секунд, выводить оповещение типа “Перезагрузите страницу или зайдите попозже”.

Вопрос в следующем: средствами браузера не удаётся эмулировать очень медленную загрузку, но почему-то мне кажется, что setInterval не запустится, пока fetch не завершится… Избавиться от await перед ней я не могу - далее идёт строка, которая должна дождаться получения ответа и потом этот документ вставить в нужное место, если он загрузится. Как сделать, чтобы setInterval запускался одновременно с fetch?
P.S. Это выдержка - часть модуля js, file.mjs

2

Все так. Интервал не запустится пока не завершится запрос. Await не даст интерпретатору дойти до следующих строк пока await-ченый promise не зарезолвится. Такой структурой кода не решить поставленную задачу.

2 варианта как поменять код для достижения цели

  • поставить интервал перед запросом (кстати, если подумать, то логично запускать код который занимается мониторингом до того кода который мониторится)
  • не использовать блокирование интерпретатора await-ом. Воспользоваться .then, например. Первый вариант мне нравится больше этого.

Тут есть 2 варианта как сэмулировать долгий запрос.

  1. Вот этот инструмент в хроме именно и делает что замедляет скорость интернета. Есть пресеты скоростей, можно поставить свои. Можно инструмент включать когда приложение уже работает и загрузилось (а не ждать с медленной скоростью пока оно загрузится)

Screenshot 2024-10-17 at 09.07.59
Screenshot 2024-10-17 at 09.07.592456×1246 296 KB

  1. Вручную сделать promise который резолвится более чем за 7 секунд. примерный код (на рабочесть не проверял). Можно в код добавить вариабельности. Я иногда эмулирую задержку как 5сек + random(4ceк) чтобы подловить несостыковку разных ассинхронностей а не только тех которые происходят через ровно 5 сек.
async function wait(milliSec) {
	return new Promise((resolve, reject) => {
		setTimeout(resolve, milliSec)
	})
}

// применение
await wait(7500)
1 лайк