我有一个从 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
TA贡献1848条经验 获得超2个赞
也许您可以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
TA贡献1852条经验 获得超7个赞
首先，您的代码需要一些清理：
; (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>
我添加了第二个计时器来证明函数内的代码确实在运行。
添加回答
举报
0/150
提交
取消