Question

学习xhr时，如何保持浏览器实时加载价格？当我们向api发送GET请求时，我们收到一个包含价格的json响应，我不想一次又一次地重新加载浏览器标签以查看价格，我希望它实时更新，怎么办？

<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
</head>
<body>
<script type="text/javascript">
var xhr = new XMLHttpRequest();
xhr.onload  = function(){
    document.write(this.responseText)
};
xhr.open("GET","https://api.coindesk.com/v1/bpi/currentprice/USD.json",true);
xhr.send();
</script>
</body>
</html>

Answer 1

您要问的基本上是如何安排代码在将来运行。内置的机制是setTimeout()（运行一次）和setInterval()（运行多次）。例如，您可以：

setInterval(function () {
  var xhr = new XMLHttpRequest();
  xhr.onload  = function(){
    document.write(this.responseText)
  };
  xhr.open("GET","https://api.coindesk.com/v1/bpi/currentprice/USD.json",true);
  xhr.send();
}, 10 * 1000);

这每10秒运行一次代码。（{10乘以1000毫秒。）但是存在一个问题，因为您的GET请求可能需要超过10秒才能完成。对于不良的移动连接和高延迟的链接（例如卫星用户的链接），尤其如此。要解决该问题，您需要改用setTimeout()，并在第一个请求完成后触发代码运行。您还应确保还包括错误情况，因为如果只有一个错误，您不希望循环停止。为了简化所有操作，我将切换为使用Fetch API。（如今，您应该使用抓取功能。抓取功能比XHR更为强大，并且得到浏览器的大力支持。）

function updatePrices() {
  return fetch('https://api.coindesk.com/v1/bpi/currentprice/USD.json').then({
    if (res.ok) {
      throw new Error('Request failed');
    }
    return res.json()
  }).then((data) => {
    console.log(data);
    setTimeout(updatePrices, 10 * 1000);
  }).catch((e) => {
    setTimeout(updatePrices, 5 * 1000); // If fail, try again sooner
  });
}
updatePrices();

现在，您每10秒更新一次。但是，您要求实时。为此，您需要使用其他工具。server-sent events。

如果您控制服务器，则可以选择支持此简单的基于文本的协议。这样，服务器就可以在数据更新后立即将数据推送给您。在客户端上设置事件源非常简单：

const eventSource = new EventSource('https://example.com/bitcoin-prices');
eventSource.addEventListener('message', (e) => {
  console.log(e.data);
});

如果连接断开，EventSource甚至将重新连接。

我希望这可以帮助您入门！

如何实时更新此内容，而不是一次又一次重新加载浏览器？

1 个答案: