Опрос данных о максимальной частоте Nuxt ⇐ Javascript

[Anonymous]

Я пытаюсь регулярно опрашивать некоторые данные в моем приложении Nuxt, на которые нужно будет ссылаться в нескольких компонентах. Для наглядности предположим, что данные — это скорость, направление, температура и точка росы ветра в аэропорту имени Джона Кеннеди.
Чтобы не перегружать сервер, я хотел бы убедиться, что запросы не отправляются чаще, чем каждые 15 секунд. Однако я не уверен, существует ли какой-то идиоматический способ сделать это. Это мой текущий подход с использованием компонуемого:

Код: Выделить всё

// app/composables/useMetar.ts

export function useMetar() {
const metar = useState('metar', () => null);

function wait(milliseconds: number) {
return new Promise(resolve => setTimeout(resolve, milliseconds));
}

const {refresh} = useAsyncData('metar:poll', async () => {
const data = await $fetch('https://aviationweather.gov/api/data/metar?ids=KJFK&format=json');
// @ts-expect-error: The initial value is null such that we don't show fake data
metar.value = data[0];
await wait(15_000);
refresh();
}, {
dedupe: 'defer',
lazy: true
});
return metar;
}

Однако это выглядит довольно неэлегантно. Во-первых, вызов useAsyncData никогда не ожидается, но, несмотря на это и параметр lazy: true, компонент, вызывающий useMetar(), все равно каким-то образом не загружается до тех пор, пока не истечет таймаут.
В конечном итоге кажется, что мне следует искать одноэлементный метод, но моя интуиция подсказывает, что для этого следует использовать путь плагина. излишне.
Я также думал об использовании useState для синхронизации промиса, но поскольку промисы не сериализуются в формате JSON, я считаю, что это был бы неправильный подход. Также было бы неплохо, если бы существовал правильный подход, который также гарантировал бы ограничение в 15 секунд для нескольких вкладок в браузере.

Подробнее здесь: https://stackoverflow.com/questions/797 ... ta-polling