在前端开发中，经常需要在浏览器中发送请求获取数据，但是浏览器原生的 Fetch API 不支持直接在浏览器中处理二进制数据。于是就有了一些第三方的工具，比如 fetch-blob，可以使得在浏览器中发送请求同时处理 Response 中的二进制数据。在本篇文章中，我们将深入了解如何使用 fetch-blob。
安装
要使用 fetch-blob，需要先通过 npm 安装它。
$ npm install fetch-blob
基本使用
下面是一个使用 fetch-blob 的基本示例：
import fetchBlob from 'fetch-blob';
fetchBlob('/image.png').then(response => response.blob()).then(blob => {
const url = URL.createObjectURL(blob);
// 使用 url 做一些事情
});代码中先通过 fetchBlob 函数获取 /image.pmg 的二进制数据，然后将得到的 Response 对象转换为 Blob 对象，并通过 URL.createObjectURL 生成一个 URL，最后可以使用这个 URL 做一些事情了。
设置请求头和参数
在使用 fetch-blob 发送请求时，可能需要设置一些请求头和请求参数，fetch-blob 提供了一些方便的方式来执行这些任务。
-- -------------------- ---- -------
------ --------- ---- -------------
------------------------- -
------- -------
-------- -
--------------- ------------------
--
----- ----------------
----- ----- -----
---- --
--
---------------- -- -------------------------- -- -
------------------
---在上述示例代码中，我们向 /api/getData 发送一个 POST 请求，并且设置了请求头部的 Content-Type，最后通过 JSON.stringify 将 body 中的参数转换为字符串。
支持跨域请求
在发送跨域请求时，需要在服务器端设置一些参数，如果服务器端未设置，我们可以在前端进行设置。
import fetchBlob from 'fetch-blob';
// 设置 mode 为 no-cors
fetchBlob('/api/getData', {
mode: 'no-cors'
}).then(response => response.text()).then(text => {
console.log(text);
});通过设置 mode 为 no-cors，我们可以在浏览器中发送跨域请求。
文件上传
fetch-blob 除了可以完成数据请求，还支持将文件上传至服务器。
-- -------------------- ---- ------- ------ --------- ---- ------------- ----- --------- - --------------------------------------------- -- --------------------- - ---------------- ------- - ----- -------- - --- ----------- ----------------------- -------------------- ------------------------ - ------- ------- ----- -------- ---------------- -- -------------------------- -- - ------------------ ---
在上述代码中，我们首先获取用户选择的文件，然后创建 FormData 对象，并将文件添加到 FormData 对象中，最后通过 fetchBlob 就可以将添加好的文件上传至服务器。
结论
通过这篇文章，我们已经能够深入了解 fetch-blob 的使用，学习了一些 fetch-blob 的高级用法和技巧，同时也掌握了上传文件和发送请求时设置请求头和请求参数的技能。希望本文能够帮助你更快地掌握 fetch-blob，实现你的前端开发目标。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedad37b5cbfe1ea0610c06