本教程详细介绍了在javascript中如何使用`fetch` api正确处理从服务器返回的二进制数据，特别是当api返回如图片生成服务（如novelai）的zip文件时。文章解释了为何直接使用`response.text()`会导致数据损坏，并提供了通过`response.arraybuffer()`获取原始二进制数据，以及将其高效转换为base64编码字符串的实用方法和示例代码，确保数据完整性和可用性。
理解API二进制数据响应
在与Web API交互时，我们通常会遇到JSON或纯文本格式的响应。然而，对于某些特定服务，例如图像生成、文件下载或流媒体API，服务器可能会直接返回二进制数据。如果未能正确处理这些二进制响应，可能会导致数据损坏或无法使用。
例如，在使用NovelAI等图像生成API时，API通常会返回一个包含生成图像的ZIP文件。尝试使用fetch API的response.text()方法来处理这种二进制响应，会导致数据被误解析为UTF-8文本，从而破坏其原始二进制结构。结果是接收到一个看似乱码的字符串，即使将其保存为文件并更改扩展名，也无法正常解压或使用，因为其内部数据已损坏。
正确获取二进制数据：使用response.arrayBuffer()
为了正确获取API返回的原始二进制数据，fetch API提供了response.arrayBuffer()方法。这个方法会异步地将响应体读取为ArrayBuffer，这是一个通用的、固定长度的原始二进制数据缓冲区。
以下是如何在JavaScript中使用fetch API请求NovelAI图像生成服务并正确获取其二进制响应的示例：
立即学习“Java免费学习笔记（深入）”；
async function generateImageAndGetBinaryData(accessToken, query) {
const model = "nai-diffusion-3"; // 示例模型
const apiUrl = "https://api.novelai.net/ai/generate-image";
try {
const response = await fetch(apiUrl, {
method: "POST",
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${accessToken}`,
'Accept': "*/*" // 接受所有类型响应
},
body: JSON.stringify({
"input": `masterpiece, best quality, ${query}`,
"model": model,
"action": "generate",
"parameters": {
"width": 768,
"height": 512,
"scale": 11,
"sampler": "k_dpmpp_2m",
"steps": 28,
"seed": Math.floor(Math.random() * 10000000000), // 随机种子
"n_samples": 1,
"ucPreset": 0,
"qualityToggle": true,
"sm": false,
"sm_dyn": false,
"dynamic_thresholding": false,
"controlnet_strength": 1,
"legacy": false,
"add_original_image": false,
"negative_prompt": "lowres, bad anatomy, bad hands, text, error, missing fingers, extra digit, fewer digits, cropped, worst quality, low quality, normal quality, jpeg artifacts, signature, watermark, username, blurry"
}
})
});
if (!response.ok) {
const errorText = await response.text();
throw new Error(`API error: ${response.status} - ${errorText}`);
}
// 关键一步：使用 response.arrayBuffer() 获取原始二进制数据
const arrayBuffer = await response.arrayBuffer();
console.log("Received ArrayBuffer:", arrayBuffer);
return arrayBuffer;
} catch (error) {
console.error("Error generating image:", error);
throw error;
}
}
// 示例调用 (假设accessToken和query已定义)
// generateImageAndGetBinaryData(myAccessToken, "a beautiful landscape")
// .then(buffer => {
// // 在这里处理 arrayBuffer，例如转换为Base64或保存为文件
// })
// .catch(err => console.error(err));将ArrayBuffer转换为Base64编码字符串
在许多场景下，例如将图像嵌入到HTML/CSS中（data: URI）、通过JSON传输二进制数据，或者在某些数据库中存储，将ArrayBuffer转换为Base64编码字符串会非常有用。Base64编码将二进制数据表示为ASCII字符串，使其可以在文本环境中安全传输。
以下是一个将ArrayBuffer转换为Base64字符串的实用函数：
/**
* 将 ArrayBuffer 转换为 Base64 编码的字符串。
* @param {ArrayBuffer} buffer 要转换的 ArrayBuffer。
* @returns {string} Base64 编码的字符串。
*/
function arrayBufferToBase64(buffer) {
let binary = '';
const bytes = new Uint8Array(buffer);
const len = bytes.byteLength;
for (let i = 0; i < len; i += 1) {
binary += String.fromCharCode(bytes[i]);
}
return btoa(binary); // btoa() 函数用于将二进制字符串编码为 Base64
}将上述转换函数集成到fetch响应处理中，即可直接获取Base64编码的图像ZIP数据：
// ... (fetch 请求部分保持不变) ...
).then(async (response) => {
if (!response.ok) {
const errorText = await response.text();
throw new Error(`API error: ${response.status} - ${errorText}`);
}
// 获取 ArrayBuffer
const arrayBuffer = await response.arrayBuffer();
// 将 ArrayBuffer 转换为 Base64 字符串
const base64Data = arrayBufferToBase64(arrayBuffer);
// 在此处处理 base64Data，例如发送给客户端或保存
console.log("Received Base64 data (first 100 chars):", base64Data.substring(0, 100) + "...");
// 如果是在服务器端（如Koa/Express）处理，可以设置响应体
// ctx.status = response.status;
// ctx.body = base64Data;
return base64Data;
}).catch(error => {
console.error("Failed to fetch or process image data:", error);
throw error;
});注意事项：
- btoa()函数只能处理ASCII字符串。如果ArrayBuffer中的字节值超出了ASCII范围，String.fromCharCode()可能会产生非ASCII字符，导致btoa()报错。然而，对于二进制数据（如图片、ZIP文件），String.fromCharCode(byte)通常是安全的，因为它只是将每个字节值映射到对应的Unicode码点，然后btoa再对这个“二进制字符串”进行编码。
- 对于大型文件，直接将整个文件加载到内存并转换为Base64可能会消耗大量内存。在这种情况下，可以考虑使用response.blob()来获取Blob对象，然后利用FileReader进行分块读取或直接创建下载链接。
总结
正确处理API返回的二进制数据是Web开发中的一项基本技能。通过理解fetch API的response.arrayBuffer()方法，我们可以有效地获取原始二进制内容，避免数据损坏。结合arrayBufferToBase64这样的实用工具函数，可以进一步将二进制数据转换为Base64编码，以满足不同的应用场景需求。在与NovelAI等图像生成API交互时，务必记住其返回的是一个名为images.zip的ZIP文件，其中包含image_0.png，因此需要按照二进制文件进行处理。
