首頁猿問如何自動刷新從 JSON API...

如何自動刷新從 JSON API 獲取數據的函數？

JavaScript

一只萌萌小番薯 2023-05-18 10:46:03

我有一個從 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 秒，則會有一些同步更新。總而言之，我認為這種自調用功能是一種更好的方法。

反對回復 2023-05-18

慕姐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>

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>

我添加了第二個計時器來證明函數內的代碼確實在運行。

反對回復 2023-05-18

2 回答
0 關注
168 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

如何自動刷新從 JSON API 獲取數據的函數？

如何自動刷新從 JSON API 獲取數據的函數？

2 回答

添加回答

如何自動刷新從 JSON API 獲取數據的函數？

如何自動刷新從 JSON API 獲取數據的函數？