Создал компонент PingBadge.vue, в нём занёс следующее:
<script setup>
import {CloudIcon} from "@heroicons/vue/24/solid/index.js";
import {defineAsyncComponent, onMounted, ref} from "vue";
import {__} from "@/trans.js";
const Badge = defineAsyncComponent(() => {
return import("@/Components/Badge.vue")
});
const props = defineProps({
fqdn: {
type: String,
}
});
const pingTime = ref(0);
function measurePing() {
const start = performance.now();
fetch(`https://${props.fqdn}:8080/`, {
mode: 'no-cors',
cache: 'no-store'
}).then(() => pingTime.value = Math.round(performance.now() - start));
}
onMounted(() => {
measurePing();
});
</script>
<template>
<Badge :icon="CloudIcon">{{ pingTime + " " + __('general.units.ms') }}</Badge>
</template>
Казалось бы, всё прозрачно! Но нет.
При первой загрузке страницы - пинг невероятно велик, а при повторной – вроде как нормализуется.
Использование принудительной перезагрузки через CTRL + F5 вроде как показывает
стабильные результаты пинга. Очень похоже на то, что во всём виноват кэш.
Сам пинг по себе крайне нестабилен, что, в общем-то странно:
при частой перезагрузке бывает плавает от 60 до 100 и выше.
(и нет, сервер не виноват, обычный icmp-пинг даёт стабильные результаты).
Вроде бы поставил режим в
fetch на
no-store (ещё пробовал с reload),
соотвественно, он должен всегда делать запрос и никогда не брать его из кэша – не помогло.
Пытался вызывать measurePing() сразу после загрузки асинхронного компонента Badge, ну, вдруг влияет как-то.
Ставил onMounted(async () => {}), пытался аппроксимировать результаты путём отправки нескольких запросов – не помогло.
Какие есть мысли?
