本教程详细阐述了在javascript中使用`fetch` api从后端获取二进制数据（如zip文件）的正确方法。针对常见的`response.text()`无法正确解析二进制内容的困境，文章重点介绍了如何利用`response.arraybuffer()`获取原始字节数据，并提供了将`arraybuffer`转换为base64字符串的实用函数及完整的api调用示例，确保数据能够被正确接收和处理。
理解API响应类型与数据处理
在前端开发中，我们经常需要通过API与后端服务进行数据交互。当API返回的数据是文本（如JSON或纯文本）时，我们通常会使用response.json()或response.text()方法来解析响应。然而，当API返回的是二进制数据，例如图片、音频、视频或压缩文件（如ZIP），直接使用这些方法会导致数据损坏或无法解析。
问题的核心在于，response.text()会尝试将接收到的字节流按照某种字符编码（通常是UTF-8）解码为字符串。对于非文本的二进制数据，这种解码操作是错误的，会导致数据丢失或转换成一串看似乱码的字符，使得原始二进制文件无法恢复。例如，当一个ZIP文件被错误地当作文本处理时，即便将其保存并重命名为.zip，也无法正常解压，并提示文件损坏。
正确获取二进制数据：response.arrayBuffer()
为了正确处理API返回的二进制数据，fetch API提供了response.arrayBuffer()方法。这个方法会返回一个Promise，解析后得到一个ArrayBuffer对象。ArrayBuffer是一个用于表示通用、固定长度的原始二进制数据缓冲区的对象，它不直接操作数据，而是通过视图（如Uint8Array）来读写其内容。
使用response.arrayBuffer()是获取任何非文本二进制数据的标准方式。
立即学习“Java免费学习笔记（深入）”；
将ArrayBuffer转换为Base64字符串
在许多Web应用场景中，我们可能需要将获取到的二进制数据进一步处理成Base64编码的字符串。例如，将图片数据直接嵌入到HTML的标签中（data:image/png;base64,…），或者在通过JSON格式发送给其他服务时。
以下是一个将ArrayBuffer转换为Base64字符串的实用函数：
/** * 将ArrayBuffer转换为Base64字符串。 * @param buffer 要转换的ArrayBuffer对象。 * @returns Base64编码的字符串。 */function arrayBufferToBase64(buffer: ArrayBuffer): string { let binary = ''; // 创建一个Uint8Array视图来访问ArrayBuffer的字节 const bytes = new Uint8Array(buffer); const len = bytes.byteLength; // 遍历所有字节，将其转换为字符并拼接 for (let i = 0; i < len; i += 1) { binary += String.fromCharCode(bytes[i]); } // 使用btoa函数进行Base64编码 return btoa(binary);}
这个函数首先通过Uint8Array视图读取ArrayBuffer中的每一个字节，然后将其转换为对应的字符，拼接成一个“二进制字符串”，最后使用浏览器内置的btoa()函数对其进行Base64编码。
完整的API调用与数据处理示例
假设我们需要调用一个图像生成API（例如NovelAI的API），该API返回一个包含生成图像的ZIP文件。以下是如何使用fetch API并结合response.arrayBuffer()和Base64转换函数来正确获取并处理这些数据的示例：
import { Context, Next } from 'koa'; // 假设在Koa环境中使用// 辅助函数：生成随机整数function getRandomInt(max: number): number { return Math.floor(Math.random() * max);}// 将ArrayBuffer转换为Base64字符串的函数function arrayBufferToBase64(buffer: ArrayBuffer): string { 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);}// 示例Koa路由处理器async function handleImageGeneration(ctx: Context, next: Next) { const accessToken = 'YOUR_ACCESS_TOKEN'; // 替换为你的实际访问令牌 const queryparse = { data: { input: 'a beautiful landscape' } }; // 示例输入 const model = 'nai-diffusion-3'; // 示例模型名称 try { const response = await fetch("https://api.novelai.net/ai/generate-image", { method: "POST", headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${accessToken}`, 'Accept': "*/*" // 接受所有类型的响应 }, body: JSON.stringify({ "input": `masterpiece, best quality, ${queryparse.data.input}`, "model": model, "action": "generate", "parameters": { "width": 768, "height": 512, "scale": 11, "sampler": "k_dpmpp_2m", "steps": 28, "seed": getRandomInt(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" } }) }); // 设置响应状态码 ctx.status = response.status; if (response.ok) { // 关键步骤：使用 arrayBuffer() 获取原始二进制数据 const arrayBuffer = await response.arrayBuffer(); // 将 ArrayBuffer 转换为 Base64 字符串 ctx.body = arrayBufferToBase64(arrayBuffer); // 提示：NovelAI API返回的ZIP文件通常名为 images.zip，内部包含 image_0.png } else { // 处理非成功响应，例如错误信息 const errorText = await response.text(); ctx.body = `Error: ${response.status} - ${errorText}`; console.error(`API Error: ${response.status} - ${errorText}`); } } catch (error) { ctx.status = 500; ctx.body = `Internal Server Error: ${error.message}`; console.error('Fetch operation failed:', error); } await next(); // 继续Koa的中间件链}// 示例用法 (在实际应用中，这会是一个路由定义)// app.use(handleImageGeneration);
注意事项与最佳实践
Accept 请求头： 在请求头中设置’Accept’: ‘*/*’或更具体的二进制MIME类型（如’Accept’: ‘application/zip’）是一个好习惯，它告诉服务器客户端可以接受的响应类型。错误处理： 始终检查response.ok属性（response.status >= 200 && response.status 直接使用ArrayBuffer： 如果你不需要将二进制数据转换为Base64字符串，而是想直接在客户端处理（例如，保存为文件、显示图片），你可以将ArrayBuffer转换为Blob对象，然后使用URL.createObjectURL()来生成一个可访问的URL。
const arrayBuffer = await response.arrayBuffer();const blob = new Blob([arrayBuffer], { type: 'application/zip' }); // 根据实际MIME类型设置const url = URL.createObjectURL(blob);// 现在可以使用这个url，例如创建一个下载链接// const link = document.createElement('a');// link.href = url;// link.download = 'generated_images.zip';// document.body.appendChild(link);// link.click();// URL.revokeObjectURL(url); // 使用完毕后释放资源
服务器响应头： 后端API在返回二进制数据时，应正确设置Content-Type响应头（例如application/zip），这有助于客户端正确识别数据类型。内存管理： 对于非常大的二进制文件，直接在内存中处理整个ArrayBuffer可能会消耗大量内存。在这种情况下，可以考虑使用流式API（如ReadableStream）进行分块处理，但这超出了本教程的范围。
总结
正确获取和处理API返回的二进制数据是前端开发中的一项基本技能。通过理解fetch API的response.arrayBuffer()方法，并结合适当的数据转换（如Base64编码），我们可以有效地处理各种非文本数据类型。记住，针对不同类型的API响应选择正确的解析方法，是确保数据完整性和应用功能性的关键。
以上就是JavaScript中正确获取并处理API返回的二进制数据（如ZIP文件）教程的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1539055.html
微信扫一扫 
支付宝扫一扫 
