简介
在前端开发中，我们经常会需要通过 Ajax 技术与后端服务器进行通信。而在上传文件等高级操作时，我们则需要使用 FormData 这一 API。但是，对于一些老旧的浏览器，它们并不支持 FormData API。这时候，我们就可以使用一个名为 xhr2-with-formdata 的 npm 包来帮助我们解决这个问题。
xhr2-with-formdata 是一个针对于 XMLHttpRequest Level 2 和 FormData API 的封装包。在一些老旧的浏览器中，这个包会优雅地降级，从而让我们的前端代码正常运行。本文将会介绍如何使用 xhr2-with-formdata 并且在日常工作中学习到相关的实践技巧。
安装
要使用 xhr2-with-formdata，我们需要通过 npm 包管理器将它安装到项目依赖当中：
npm install xhr2-with-formdata --save
这样，xhr2-with-formdata 就会被安装到我们的项目中。
使用
现在，我们已经成功地将 xhr2-with-formdata 安装到了项目依赖当中。下面，我们将介绍在代码中如何使用它。
首先，我们需要将 xhr2-with-formdata 引入到我们的 JavaScript 文件当中：
const XHR2 = require('xhr2-with-formdata')或
import XHR2 from 'xhr2-with-formdata'
这里，我们将 XHR2 对象命名为 xhr2。接着，我们需要创建一个 XHR 对象：
const xhr = new xhr2()
然后，我们就可以使用这个 XHR 对象来发送上传文件请求：
const formData = new FormData()
formData.append('file', file)
xhr.open('POST', '/upload', true)
xhr.send(formData)这里的 file 是我们要上传的文件。通过 formData.append() 方法，我们将它追加到 FormData 中。接下来，我们使用 xhr.open() 方法指定了上传 URL，上传方法为 POST。
最后，我们使用 xhr.send() 方法来发送 FormData 请求。在发送请求的过程中，xhr2-with-formdata 会自动进行相关的兼容性检查和处理。如果当前浏览器支持 FormData API，则直接使用原生的 XMLHttpRequest 对象。否则，xhr2-with-formdata 会进行相应的降级处理。
示例代码
下面给出一个完整的使用示例：
-- -------------------- ---- -------
----- ---- - -----------------------------
----- --- - --- ------
----- ----- - --------------------------------------------
----- ---- - --------------
----- -------- - --- ----------
----------------------- -----
---------------- ---------- -----
------------------
---------------------------- -------- -- -
-- ----------- -- --- -- ---------- - ---- -
-----------------------------
- ---- -
---------------------
-
--在这个示例中，我们通过 input 元素来创建一个文件对象。然后，使用 FormData 将文件对象追加到请求中，并发送 POST 请求到指定 URL。最后，我们通过监听 xhr 对象的 load 事件来判断上传是否成功。
其他相关用途
除了上传文件，xhr2-with-formdata 还可以用于其他一些相关的用途。比如，我们可以使用它来处理复杂的表单数据。此外，xhr2-with-formdata 还可以用于处理跨域请求。
总结
xhr2-with-formdata 是一个非常好用的 npm 包，它可以帮助我们解决一些老旧浏览器不支持 FormData API 的问题。在日常开发中，我们可以将它作为前端开发的常用工具之一，以提升我们的开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055e4881e8991b448dbba9