在前端开发中，我们经常需要向服务器请求各种二进制类型的文件，例如图片、视频、音频等等。然而，使用传统的 XMLHttpRequest 对象进行二进制文件的请求是非常麻烦的。为了简化二进制数据的请求流程，我们可以使用 npm 包 binary-xhr。该 npm 包可以在浏览器端进行二进制文件的请求，并操作二进制数据，方便我们在页面上使用。
安装
在使用 binary-xhr 之前，我们需要先安装该 npm 包。可以通过 npm 命令行进行安装：
--- ------- ---------- ------
安装完成后，我们可以在项目中引入该 package：
------ - --------- - ---- -------------
请求二进制数据
binary-xhr 提供了一个函数 xhrBinary 来请求二进制数据。该函数接受两个参数：
- 请求的 URL
- 请求成功后的回调函数，回调函数接受一个参数，即二进制数据
例如，我们可以请求一个音频文件并进行播放：
------ - --------- - ---- ------------- ----- ----- - --- -------- ------------------------------- ------ -- - --------- - ----------------------- -------------- -------------- - ----- --------------------------------- ---
上面的代码向服务器请求了一个音频文件，并在请求成功后通过回调函数将请求到的二进制数据传递给 audio 元素进行播放。
使用 ArrayBuffer
xhrBinary 函数的回调函数参数默认是 Uint8Array 类型的二进制数据。如果需要使用 ArrayBuffer 类型的数据，可以在调用 xhrBinary 函数时传递第三个参数 true：
------ - --------- - ---- ------------- --------------------------------- ------ -- - ----- ------ - ------------ ------------------ ---------- ------------- -- ---- -- ------
发送请求头
如果需要发送请求头，我们可以在调用 xhrBinary 函数时传递第四个参数 options：
------ - --------- - ---- -------------
--------------------------------- ------ -- -
-- -- --------- ---- ------ ----
-- ------ -
-------- -
-------------- ------- ---------
--
---修改响应类型
xhrBinary 函数默认的响应类型是 arraybuffer，如果需要修改响应类型，可以在调用 xhrBinary 函数时传递第四个参数 options：
------ - --------- - ---- ------------- --------------------------------- ------ -- - ------------------ ------ -- -------- -- ------ - ------------- ------- ---
注意点
- 使用 binary-xhr 请求的二进制数据会暂存于内存中，因此不适合请求大文件。
- binary-xhr 不能跨域请求资源，除非服务器允许跨域请求。
- 在一些较老的浏览器中不支持 Blob、URL.createObjectURL、Audio 等 API，因此需要进行额外的兼容处理。
总结
使用 binary-xhr 可以方便的向服务器请求二进制数据，并在页面上进行操作。需要注意的是，使用 binary-xhr 请求的二进制数据会暂存于内存中，因此不适合请求大文件。同时，binary-xhr 不能跨域请求资源，需要服务器允许跨域请求。我们可以通过上述方法来使用 binary-xhr，以及避免一些注意点。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5eeda77ecebd9a1b02fbaad4