在现代的前端开发中，我们通常会使用 ES6/ES2015+ 语法来编写 JavaScript 代码，因为 ES6/ES2015+ 提供了更多的新特性和语言功能。然而，由于浏览器在支持 ES6/ES2015+ 语法方面的不足，我们通常需要使用 Babel 来编译 ES6 代码。但有时候，在编译时我们会遇到 “Promise is not defined” 的错误，这是因为 Promise 是 ES6 新增的语言特性，在一些旧浏览器中并不支持，因此需要使用 Promise 的 polyfill 在旧浏览器中提供 Promise 支持。
Promise 概述
Promise 是一种处理异步操作的方法，它代表了一个异步操作的最终完成（或失败）及其结果值。Promise 提供了比传统的回调函数更简洁、更直观的编程方式，使 JavaScript 中异步编程变得更为容易。
Promise 对象有 3 种状态：pending（等待中）、fulfilled（已成功）和 rejected（已失败）。Promise 对象的状态只能由 pending 转换到 fulfilled 或 rejected，一旦状态转换完成，就不可以再次发生变化。Promise 对象在初始化时会执行传入的 executor 函数，该函数有 2 个参数：resolve 和 reject 函数，分别用于将 Promise 对象的状态从 pending 转换到 fulfilled 或 rejected。
下面是一个简单的 Promise 示例：
----- ------- - --- ----------------- ------- -- -
------------- -- -
----- ------ - --------------
-- ------- - ---- -
----------------
- ---- -
---------- ------------- ------ -- --- ----------
-
-- ------
---
-------
-------------- -- -
--------------------- ---- ------- ------------
--
-------------- -- -
---------------------
---在以上示例中，我们创建了一个 Promise 对象，设置了一个延迟函数，随机返回一个数。如果该数大于 0.5，则使用 resolve 函数将 Promise 对象状态设置为 fulfilled，并返回该数值；否则，使用 reject 函数将 Promise 对象状态设置为 rejected，并返回一个 Error 对象。最后通过 then 和 catch 方法来处理 Promise 对象的状态。
解决方案
要解决 “Promise is not defined” 的问题，我们需要使用 Promise 的 polyfill，并添加到项目中。Polyfill 是一个 JavaScript 库，提供了浏览器不支持的新特性的实现，让我们的代码可以在所有 浏览器上运行。在 Promise 的 polyfill 中，常见的有 es6-promise 和 Promise-polyfill 等库。
使用 es6-promise
es6-promise 是 Promise 的轻量级 polyfill，它支持 Promise/A+ 规范，并且只有 4KB 左右的体积。要使用 es6-promise，可以先使用 npm 或 yarn 安装它：
--- ------- ------ ----------- - -- ---- --- -----------
安装完成后，在需要使用 Promise 的代码中，可以通过以下方式来引入 es6-promise：
------ ------------------- -- -- ----------------------------
在主文件（入口文件）中加上上述代码后，es6-promise 会自动为全局环境提供 Promise 支持，这样我们就可以在编译 ES6 代码时无需担心 Promise is not defined 的问题了。
使用 Promise-polyfill
Promise-polyfill 是 ES6 Promise 的 polyfill，支持所有规范等级，即 Promise/A+ 和 ES2015 中原生的 Promise 规范。要使用 Promise-polyfill，可以先使用 npm 或 yarn 安装它：
--- ------- ------ ---------------- - -- ---- --- ----------------
安装完成后，在需要使用 Promise 的代码中，可以通过以下方式来引入 Promise-polyfill：
------ -------------------------------- -- -- -----------------------------------------
这样，我们就可以很方便地使用 Promise-polyfill 提供的全局 Promise 对象，从而解决 Promise is not defined 的问题。
示例代码
------ -------------------
----- --------- - -- -- -
------ --- ----------------- ------- -- -
------------- -- -
----- ------ - --------------
-- ------- - ---- -
---------------- ---- ------------- ------------
- ---- -
---------- ------------- -- ----- ---------
-
-- ------
---
--
-----------
-------------- -- -
--------------------
--
-------------- -- -
---------------------
---在以上示例代码中，我们使用了 es6-promise，并且定义了一个 fetchData 函数，该函数返回一个 Promise 对象，在 1 秒后随机返回一个数。在 then 和 catch 中处理该 Promise 对象的状态。在入口文件中，我们使用 import 'es6-promise/auto' 来引入 es6-promise，并为全局环境提供 Promise 支持。
结论
在使用 Babel 编译 ES6 代码时，我们可能会遇到 Promise is not defined 的问题。这是因为浏览器在支持 ES6 新特性时的不足，缺少对 Promise 的支持。为了解决这个问题，我们可以使用 Promise 的 polyfill，如 es6-promise 或 Promise-polyfill。在项目中引入相应的 polyfill 后，我们就可以在任何浏览器中使用 Promise 了。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6708c27ad91dce0dc8740fdb