Почему дублируется выполнение кода в нутри хука?
Есть такой код:
<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 раз.
