在前端开发中，我们经常会使用 Babel 编译器来将 ES6+ 的代码转换成 ES5 可以兼容的代码。然而，有时候我们会遇到一个问题：在转换后的代码中，出现了 Promise 未定义的错误。这是因为 Babel 默认只转换语法，而不会转换 API，因此需要我们手动添加 Promise 的 polyfill。
Promise 的作用
在介绍如何解决 Promise 未定义错误之前，我们先来看一下 Promise 的作用。
Promise 是一种异步编程的解决方案，它可以避免回调地狱，让异步代码更加清晰、易于维护。Promise 有三种状态：pending（进行中）、fulfilled（已成功）和 rejected（已失败），可以通过 then 方法来处理成功和失败的情况。
-- -------------------- ---- -------
----- ------- - --- ----------------- ------- -- -
-- ----
-- --- ------ --- -
---------------- -- ----------- ---- --
- ---- -
-------------- -- ----------- ----- --
-
---
------------------- -- -
-- -------
-------------- -- -
-- -------
---Promise 未定义错误
当我们在使用 Babel 编译器将 ES6+ 的代码转换成 ES5 可以兼容的代码时，如果代码中使用了 Promise，就会出现 Promise 未定义的错误，如下所示：
Uncaught ReferenceError: Promise is not defined
这是因为 Babel 默认只转换语法，而不会转换 API。Promise 是 ES6 中新增的 API，需要通过 polyfill 来实现。
解决 Promise 未定义错误
要解决 Promise 未定义错误，我们需要添加 Promise 的 polyfill。Polyfill 是一种代码补丁，用于在不支持某些新 API 的浏览器中模拟这些 API 的行为。在前端开发中，我们经常使用 polyfill 来实现浏览器兼容性。
使用 polyfill.io
在使用 polyfill.io 之前，我们需要了解一下它的工作原理。polyfill.io 可以根据浏览器的 User-Agent，动态生成相应的 polyfill 代码，并将其注入到页面中。这样就可以在不同的浏览器中实现相同的行为。
使用 polyfill.io 的步骤如下：
- 在 HTML 文件的 head 中添加如下代码：
<script src="https://polyfill.io/v3/polyfill.min.js"></script>
- 在 Babel 配置文件中添加如下代码：
-- -------------------- ---- -------
-------------- - -
-------- -
-
--------------------
-
-------------- --------
--------- -
-
-
-
--其中，useBuiltIns 设置为 usage 表示根据代码中使用的新 API 自动导入相应的 polyfill，而不是导入所有的 polyfill。corejs 设置为 3 表示使用 core-js 3 的 polyfill。
使用 @babel/polyfill
除了使用 polyfill.io 外，我们还可以使用 @babel/polyfill 来添加 Promise 的 polyfill。
- 首先，我们需要安装 @babel/polyfill：
npm install --save @babel/polyfill
- 在入口文件中添加如下代码：
import "@babel/polyfill";
这样就可以在代码中使用 Promise 了。
总结
Babel 编译器中的 Promise 未定义错误是由于 Babel 默认只转换语法，而不会转换 API。要解决这个问题，我们需要添加 Promise 的 polyfill。可以使用 polyfill.io 或 @babel/polyfill 来添加 Promise 的 polyfill。在实际开发中，我们需要根据具体的需求来选择适合自己的方案。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66144602d10417a2224959cd