猿问

如何自动刷新从 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 秒自动刷新一次？


一只萌萌小番薯
浏览 151回答 2
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 秒，则会有一些同步更新。总而言之，我认为这种自调用功能是一种更好的方法。
0

慕姐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() {&nbsp; &nbsp; var d = new Date();&nbsp; &nbsp; document.getElementById("demo").innerHTML = "Current Time: " + d.toLocaleTimeString();}// making an async function (non-async function won't work -_-)async function get_data_from_api() {&nbsp; &nbsp; // data&nbsp; &nbsp; var d2 = new Date();&nbsp; &nbsp; document.getElementById("last").innerHTML = "Fetch Time: " + d2.toLocaleTimeString();&nbsp; &nbsp; const response = await fetch(api_url);&nbsp; &nbsp; var data = await response.json();&nbsp; &nbsp; // song info&nbsp; &nbsp; var track = data["recenttracks"]["track"][0]["name"];&nbsp; &nbsp; var artist = data["recenttracks"]["track"][0]["artist"]["#text"];&nbsp; &nbsp; document.getElementById("demo2").innerText = "Fetched Data " . response;}myTimer();get_data_from_api();</script></body></html>我添加了第二个计时器来证明函数内的代码确实在运行。
0
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答