Я хочу сделать компонент, который будет рендерить таймер обратного отсчета перед отправкой запроса на сервер.
Логика такая: При загрузке страницы отправлять запрос по API:
- Если запрос успешный, показывать один компонент.
- Если запрос был неудачным, отправлять повторный через несколько секунд. Сделать несколько попыток. На каждой попытке рендерить компонент с таймером обратного счета.
Например: сделать 3 попытки через 3, 6 и 9 секунд.
- Первый неудачный запрос: показываем компонент с таймером 3, 2, 1. Делаем второй запрос.
- Второй неудачный запрос: показываем компонент с таймером 6, 5, 4, 3, 2, 1. Делаем третий запрос.
- Третий неудачный запрос: показываем компонент с таймером 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