随着互联网的发展，实时数据成为了越来越重要的一部分。前端开发者需要不断地获取实时数据并显示在页面上，以满足用户的需求。本文将介绍如何使用 Fetch API 和 Server-sent Events 获取并显示实时数据。
Fetch API
Fetch API 是一个新的 Web API，可以用来发送和接收 HTTP 请求和响应。它比传统的 XMLHttpRequest 更简单易用，并且支持 Promise，使得异步操作更加方便。
基本用法
Fetch API 的基本用法非常简单，只需要调用 fetch() 方法并传入请求的 URL 即可：
// www.javascriptcn.com code example
fetch('/api/data')
.then(response => {
if (response.ok) {
return response.json();
} else {
throw new Error('Network response was not ok.');
}
})
.then(data => {
console.log(data);
})
.catch(error => {
console.error('There was a problem with the fetch operation:', error);
});上面的代码中，fetch() 方法返回一个 Promise，我们可以使用 then() 方法来处理响应。如果响应成功，我们可以调用 response.json() 方法来解析 JSON 数据。如果响应失败，我们可以使用 catch() 方法来处理错误。
发送 POST 请求
除了 GET 请求，我们还可以发送 POST 请求。发送 POST 请求时，需要在 fetch() 方法的第二个参数中传入一个对象，用来配置请求的方法和参数。例如：
// www.javascriptcn.com code example
fetch('/api/data', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
name: 'John',
age: 30
})
})
.then(response => {
if (response.ok) {
return response.json();
} else {
throw new Error('Network response was not ok.');
}
})
.then(data => {
console.log(data);
})
.catch(error => {
console.error('There was a problem with the fetch operation:', error);
});上面的代码中，我们使用了 POST 方法，并传入了请求头和请求体。请求体中的数据需要使用 JSON.stringify() 方法将对象转换为 JSON 字符串。
设置超时时间
有时候我们需要设置请求的超时时间，以避免因网络原因导致请求长时间无响应。Fetch API 提供了一个 signal 参数，可以用来设置请求的超时时间。例如：
// www.javascriptcn.com code example
const controller = new AbortController();
const signal = controller.signal;
setTimeout(() => {
controller.abort();
}, 5000);
fetch('/api/data', { signal })
.then(response => {
if (response.ok) {
return response.json();
} else {
throw new Error('Network response was not ok.');
}
})
.then(data => {
console.log(data);
})
.catch(error => {
console.error('There was a problem with the fetch operation:', error);
});上面的代码中，我们使用了 AbortController 类来创建一个控制器，并设置了一个 5 秒的超时时间。如果请求在超时时间内没有响应，我们将调用控制器的 abort() 方法来取消请求。
Server-sent Events
Server-sent Events 是一种基于 HTTP 的服务器推送技术，可以用来实现实时数据的推送。它与 WebSocket 类似，但是比 WebSocket 更简单易用，并且可以使用标准的 HTTP 协议。
基本用法
使用 Server-sent Events 非常简单，只需要在服务器端发送一个 Content-Type 为 text/event-stream 的响应，然后在客户端使用 EventSource 对象来接收推送的数据。例如：
const source = new EventSource('/api/data');
source.onmessage = event => {
const data = JSON.parse(event.data);
console.log(data);
};上面的代码中，我们创建了一个 EventSource 对象，并指定了服务器端的 URL。然后我们可以使用 onmessage 事件来处理推送的数据。推送的数据需要使用 JSON.parse() 方法来解析 JSON 字符串。
事件类型
Server-sent Events 支持多种事件类型，如 message、open 和 error。我们可以使用 EventSource 对象来监听这些事件。例如：
// www.javascriptcn.com code example
const source = new EventSource('/api/data');
source.onopen = () => {
console.log('Connection opened.');
};
source.onerror = () => {
console.error('There was a problem with the connection.');
};
source.addEventListener('custom-event', event => {
const data = JSON.parse(event.data);
console.log(data);
});上面的代码中，我们使用了 onopen 和 onerror 事件来处理连接的打开和错误。我们还使用了 addEventListener 方法来监听自定义的事件类型。
断开连接
在使用 Server-sent Events 时，我们需要注意断开连接的问题。如果连接断开，我们需要重新建立连接。例如：
// www.javascriptcn.com code example
let source = null;
function connect() {
source = new EventSource('/api/data');
source.onmessage = event => {
const data = JSON.parse(event.data);
console.log(data);
};
source.onerror = () => {
console.error('There was a problem with the connection.');
source.close();
setTimeout(() => {
connect();
}, 1000);
};
}
connect();上面的代码中，我们使用了一个 connect() 函数来建立连接。如果连接出现错误，我们将关闭连接并在 1 秒后重新建立连接。
示例代码
下面是一个使用 Fetch API 和 Server-sent Events 获取并显示实时数据的示例代码：
// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Real-time Data</title>
</head>
<body>
<h1>Real-time Data</h1>
<ul id="data"></ul>
<script>
const dataElement = document.getElementById('data');
function fetchData() {
fetch('/api/data')
.then(response => {
if (response.ok) {
return response.json();
} else {
throw new Error('Network response was not ok.');
}
})
.then(data => {
const li = document.createElement('li');
li.textContent = data.value;
dataElement.appendChild(li);
setTimeout(() => {
fetchData();
}, 1000);
})
.catch(error => {
console.error('There was a problem with the fetch operation:', error);
});
}
function connect() {
const source = new EventSource('/api/events');
source.onmessage = event => {
const data = JSON.parse(event.data);
const li = document.createElement('li');
li.textContent = data.value;
dataElement.appendChild(li);
};
source.onerror = () => {
console.error('There was a problem with the connection.');
source.close();
setTimeout(() => {
connect();
}, 1000);
};
}
fetchData();
connect();
</script>
</body>
</html>上面的代码中，我们使用了 Fetch API 来获取实时数据，并使用 Server-sent Events 来接收推送的数据。获取到的数据将显示在一个 ul 元素中。我们还使用了 setTimeout 和 setInterval 来定时获取数据。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d28949a941bf71344cb828