0

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

Логика такая: При загрузке страницы отправлять запрос по API:

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

Например: сделать 3 попытки через 3, 6 и 9 секунд.

  1. Первый неудачный запрос: показываем компонент с таймером 3, 2, 1. Делаем второй запрос.
  2. Второй неудачный запрос: показываем компонент с таймером 6, 5, 4, 3, 2, 1. Делаем третий запрос.
  3. Третий неудачный запрос: показываем компонент с таймером 9, 8, 7, 6, 5, 4, 3, 2, 1. Делаем третий (последний) запрос.

Я написал функцию, которая делает несколько попыток через заданное количество секунд - все работает. Проблема в рендере таймера. Почему-то рендерится только 2 попытка.

После каждого запроса в компонент приходит таймер (3, 6, 9). Я пробовал через watch (т.е. если изменилось число таймера то запускать функцию которая производит отсчет но не работает):

  watch: {
    timeout() {
      this.countDown(this.timeout);
    },
  },

Помогите пожалуйста сделать этот компонент. Я сделал codesandbox: https://codesandbox.io/s/peaceful-sinoussi-ozjkq8?file=/src/App.vue

1 ответ 1

1

В ErrorRequest.vue

  methods: {
    countDown(sec) {
      // если возникнет такая ситуация, что таймеры будут вклачются в перемешку,
      // но interval глобальный (data.interval), то есть риск 
      // не отключить какой-нибудь таймер, и наоборот
      // отключить, да не тот, что так же приведёт
      // к неожиданным визуальным эффектам:)
      // пусть interval хотя бы будет локальным для каждого таймера
      let interval = setInterval(() => {
        this.timer = sec;
        // если есть основание полагать, что vue откладывает обновление экрана,
        // пропуская тем самым драгоценные нам секунды
        // (хотя секунды должно вполне хватать, чтобы vue поспевал рисовать?)
        this.$forceUpdate(); 
        if (sec === 0) {
          clearInterval(interval);
          return;
        }
        sec--;
      }, 1000);
    },
  },

  watch: {
    timeout: {
      handler(newTimeout) {
        this.countDown(newTimeout);
      },
      // чтобы компонент реагировал на начальное значение свойства
      // (т.е. на первый запрос в данном случае)
      immediate: true, 
    },
  },
1
  • Большое спасибо!!!!!
    – qweezz
    4 июл 2022 в 13:33

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.