第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題，去搜搜看，總會(huì)有你想問的

如何自動(dòng)刷新從 JSON API 獲取數(shù)據(jù)的函數(shù)？

如何自動(dòng)刷新從 JSON API 獲取數(shù)據(jù)的函數(shù)？

一只萌萌小番薯 2023-05-18 10:46:03
我有一個(gè)從 API 獲取數(shù)據(jù)的網(wǎng)站last.fm。我希望它每 5 秒自動(dòng)刷新一次，而無需我手動(dòng)刷新頁面。這是我嘗試過的：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 秒自動(dòng)刷新一次？
查看完整描述

2 回答

?
慕尼黑5688855

TA貢獻(xiàn)1848條經(jīng)驗(yàn) 獲得超2個(gè)贊

也許您可以get_data_from_api在獲取數(shù)據(jù)后讓函數(shù)調(diào)用自身。用于setTimeout讓它在發(fā)出新請(qǐng)求之前等待一段時(shí)間。您可以通過錯(cuò)誤處理改進(jìn)此代碼，并在出現(xiàn)獲取錯(cuò)誤時(shí)立即重試。


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 秒調(diào)用一次更新函數(shù)，因此如果該函數(shù)需要 6 秒來完成請(qǐng)求，它將真正每 4 秒更新一次，如果某些請(qǐng)求花費(fèi)超過 10 秒，則會(huì)有一些同步更新?？偠灾?，我認(rèn)為這種自調(diào)用功能是一種更好的方法。


查看完整回答
反對(duì) 回復(fù) 2023-05-18
?
慕姐4208626

TA貢獻(xiàn)1852條經(jīng)驗(yàn) 獲得超7個(gè)贊

首先，您的代碼需要一些清理：


; (semi-colon)您缺少以下兩行的結(jié)尾：

var track = data["recenttracks"]["track"][0]["name"]

var artist = data["recenttracks"]["track"][0]["artist"]["#text"]

您的get_data_from_api函數(shù)不需要任何參數(shù)，因?yàn)槟呀?jīng)api_url為鏈接聲明了常量以獲取數(shù)據(jù)


api_url您沒有在函數(shù)內(nèi)部的任何地方引用from get_data_from_api。


W3Schools 的 Timing Tutorial有一個(gè)非常簡(jiǎn)單的演示，我將您的代碼與他們的代碼結(jié)合起來以演示它是如何為我工作的（除了我沒有用于 last.fm 的任何 API，所以我的數(shù)據(jù)沒有顯示，但代碼運(yùn)行了):


<!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>

我添加了第二個(gè)計(jì)時(shí)器來證明函數(shù)內(nèi)的代碼確實(shí)在運(yùn)行。


查看完整回答
反對(duì) 回復(fù) 2023-05-18
  • 2 回答
  • 0 關(guān)注
  • 171 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)