Почему дублируется выполнение кода в нутри хука?

Есть такой код:

<template>

   <div class="wrapper">
   </div>

</template>

<script>

import axios from 'axios';

export default{

  created () {
    console.log('222');
    this.getTrackerIdData();
    this.getTrackerData();
  },

  methods: {

    getTrackerIdData () {
        return axios.get("https://seo-gmbh.eu/couriertracker/json/couriertracker_api.php?action=tracking_new.create" , {
         })
        .then(response => {
          this.$store.commit('tracker/setTrackingKeyId', response.data.data.tracking_new_key_id);
          this.$store.commit('tracker/setQrCodeUrl', response.data.data.filename_qr_code_tracking_new);
        })
        .catch(function (error) {
          console.log(error);
        });
    },

    getTrackerData () {

        setInterval(()=>myTimer(this), 60000);

        function myTimer(th) {
             return axios.get("https://seo-gmbh.eu/couriertracker/json/couriertracker_api.php?action=get_tracking_data&key_id=" + th.$store.state.tracker.trackingKeyId , {
             })
            .then(response => {
              th.$store.commit('tracker/setTrackingServerData', response.data.data.tracking_data);
            })
            .catch(function (error) {
              console.log(error);
            });
        }

},

  }
}
</script>


При запуске в проекте такого решения - разработчик на стороне сервера сообщил мне что как минимум метод запроса getTrackerIdData() на его стороне срабатывает дважды!
Поместив код(console.log('222');) в хук жизненного цикла created(там где происходит вызов методов) - я обнаружил что он выводится дважды в фаербаге:

введите сюда описание изображения


Вопрос:
Почему это происходит и какой подход в данном случае является правильным c точки зрения реализации получения данных со стороны сервера?

P.S. Если все вызывать в хуке mounted то код срабатывает в том числе и на стороне сервера только 1 раз.


Ответы (0 шт):