Node.js代码
const express = require("express");
const pako = require("pako");
const data = require("./data.json");
const app = express();
app.use(express.static("public"));
app.get("/data", (req, res) => {
const str = JSON.stringify(data);
res.send(str);
});
app.get("/dataDeflate", (req, res) => {
const str = JSON.stringify(data);
const buffer = new TextEncoder().encode(str);
const compressedData = pako.deflate(buffer);
res.set({
"Content-Type": "application/octet-stream",
});
res.send(Buffer.from(compressedData));
});
app.get("/dataGzip", (req, res) => {
const str = JSON.stringify(data);
const buffer = new TextEncoder().encode(str);
const compressedData = pako.gzip(buffer);
res.set({
"Content-Type": "application/octet-stream",
});
res.send(Buffer.from(compressedData));
});
app.listen(8080);
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Fetch Compressed Data</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pako/2.0.3/pako.min.js"></script>
</head>
<body>
<h1>Fetch Compressed Data</h1>
<button onclick="getRawData()">getRawData</button>
<button onclick="getDeflateData()">getDeflateData</button>
<button onclick="getGzipData()">getGzipData</button>
<div id="output"></div>
<script>
async function getDeflateData() {
try {
const response = await fetch("/dataDeflate");
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}
const compressedData = new Uint8Array(await response.arrayBuffer());
const decompressedData = pako.inflate(compressedData);
const str = new TextDecoder().decode(decompressedData);
document.getElementById("output").textContent = str;
} catch (error) {
console.error("Error fetching or decompressing data:", error);
}
}
async function getGzipData() {
try {
const response = await fetch("/dataGzip");
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}
const compressedData = new Uint8Array(await response.arrayBuffer());
const decompressedData = pako.ungzip(compressedData);
const str = new TextDecoder().decode(decompressedData);
document.getElementById("output").textContent = str;
} catch (error) {
console.error("Error fetching or decompressing data:", error);
}
}
function getRawData() {
getData();
}
async function getData() {
const res = await fetch("/data");
console.log(res);
}
</script>
</body>
</html>
http请求头和响应头
