如何自动刷新从 JSON API 获取数据的函数？
我有一个从 API 获取数据的网站last.fm。我希望它每 5 秒自动刷新一次，而无需我手动刷新页面。这是我尝试过的：
const api_url = "https://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&user=flarely&api_key=key_here&format=json&limit=1";
// making an async function (non-async function won't work -_-)
async function get_data_from_api(url) {
//Data
const response = await fetch(url);
var data = await response.json();
//Song info
var track = data["recenttracks"]["track"][0]["name"]
var artist = data["recenttracks"]["track"][0]["artist"]["#text"]
document.getElementById('music').innerHTML = "🎧 listening to " + track + " by " + artist;
}
setInterval(get_data_from_api, 1000);
//Calling the function,
get_data_from_api(api_url);
我该怎么做才能每 10 秒自动刷新一次？
一只萌萌小番薯2回答
-
慕尼黑5688855
也许您可以get_data_from_api在获取数据后让函数调用自身。用于setTimeout让它在发出新请求之前等待一段时间。您可以通过错误处理改进此代码，并在出现获取错误时立即重试。const api_url = "https://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&user=flarely&api_key=key_here&format=json&limit=1"; async function get_data_from_api(api_url) { // data const response = await fetch(api_url); var data = await response.json(); // song info var track = data["recenttracks"]["track"][0]["name"] var artist = data["recenttracks"]["track"][0]["artist"]["#text"] document.getElementById('music').innerHTML = "🎧 listening to " + track + " by " + artist; setTimeout(() => get_data_from_api(api_url), 10000)})get_data_from_api(api_url)使用这种方法，它将在上次更新后 10 秒更新。使用SetInterval将每 10 秒调用一次更新函数，因此如果该函数需要 6 秒来完成请求，它将真正每 4 秒更新一次，如果某些请求花费超过 10 秒，则会有一些同步更新。总而言之，我认为这种自调用功能是一种更好的方法。 -
慕姐4208626
首先，您的代码需要一些清理：; (semi-colon)您缺少以下两行的结尾：var track = data["recenttracks"]["track"][0]["name"]var artist = data["recenttracks"]["track"][0]["artist"]["#text"]您的get_data_from_api函数不需要任何参数，因为您已经api_url为链接声明了常量以获取数据api_url您没有在函数内部的任何地方引用from get_data_from_api。W3Schools 的 Timing Tutorial有一个非常简单的演示，我将您的代码与他们的代码结合起来以演示它是如何为我工作的（除了我没有用于 last.fm 的任何 API，所以我的数据没有显示，但代码运行了):<!DOCTYPE html><html><body><p>A script on this page starts this clock:</p><p id="demo">Current Time</p><p id="demo2">Fetch Data</p><p id="last">Fetch Time</p><script>const api_url = "https://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&user=flarely&api_key=key_here&format=json&limit=1";var myVar = setInterval(myTimer, 1000);var myVar2 = setInterval(get_data_from_api, 10000);function myTimer() { var d = new Date(); document.getElementById("demo").innerHTML = "Current Time: " + d.toLocaleTimeString();}// making an async function (non-async function won't work -_-)async function get_data_from_api() { // data var d2 = new Date(); document.getElementById("last").innerHTML = "Fetch Time: " + d2.toLocaleTimeString(); const response = await fetch(api_url); var data = await response.json(); // song info var track = data["recenttracks"]["track"][0]["name"]; var artist = data["recenttracks"]["track"][0]["artist"]["#text"]; document.getElementById("demo2").innerText = "Fetched Data " . response;}myTimer();get_data_from_api();</script></body></html>我添加了第二个计时器来证明函数内的代码确实在运行。
随时随地看视频慕课网APP
相关分类
JavaScript