首页 > 解决方案 > 如何从 api 自动更新数据?

问题描述

我从 API 获取数据,但没有自动更新。我能做些什么?如何自动更新?

<div>
  <p id="pet">Lorem, ipsum dolor.</p>
</div>
var burl = "https://api.binance.com"
var query = "/api/v3/depth"
query += "?symbol=BTCUSDT&limit=5" //price
var url = burl + query;

var myrequest = new XMLHttpRequest();
myrequest.open("GET", url, true);

myrequest.onload = (function() {
  if (this.status == 200) {
    var dizi = new Array();
    dizi = JSON.parse(myrequest.responseText)
    var price = Number(dizi.asks[0][0]);
    console.log(typeof price)

    $("#pet").text(price)
  }
})
myrequest.send();

标签: javascriptjqueryjson

解决方案


您可以使用 setTimeout() 函数定期调用 API,例如每 5 秒一次。首先,您必须将代码移动到函数中,然后调用该函数。

Lorem, ipsum dolor。

function getData(){
   var burl = "https://api.binance.com"
   var query = "/api/v3/depth"
   query += "?symbol=BTCUSDT&limit=5" //price
   var url = burl + query;

   var myrequest = new XMLHttpRequest();
   myrequest.open("GET", url, true);

   myrequest.onload = (function() {
      if (this.status == 200) {
         var dizi = new Array();
         dizi = JSON.parse(myrequest.responseText);
         var price = Number(dizi.asks[0][0]);
         console.log(typeof price);

         $("#pet").text(price);

         setTimeout(getData(), 5000); //5000 means 5 seconds
      }
   });
   myrequest.send();
}
getData();

请注意,我没有使用 setInterval() 一遍又一遍地调用该函数。我在成功中使用 settimeout() 以确保仅在当前调用完成时才调用下一个调用。


推荐阅读