Приостанавливаем выполнение приложения, если пропало соединение с сетью

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

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

async function main () {
  let url = ' ... '

  while (url) {
    const resp = await fetch(url)
    const json = await resp.json()
    url = json.url
  }
}

Но если посреди этого процесса пропадёт связь с интернетом, то очередь прервётся. Давайте исправим это.

Для начала напишем функцию, которая будет возвращать промис, который будет решатся, в момент, когда клиент возобновит соединение:

function awaitOnline () {
  return new Promise(resolve => {
    // Если клиент уже online — немедленно возвращаем результат
    if (navigator.onLine) {
      resolve()
      return
    }

    // Регистрируем обработчик и решаем промис как только клиет будет online
    window.addEventListener(
      'online',
      () => resolve(),
      {once: true} // Автоматически удаляем обработчик после первого события
    )
  })
}

Теперь добавим её в наш основной код

async function main () {
  let url = ' ... '

  while (url) {
    await awaitOnline() // Выполнение приостановится в этом месте до момента возобновления сети
    const resp = await fetch(url)
    const json = await resp.json()
    url = json.url
  }
}

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

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