在前端开发中，ES6 的 Promise 成为了处理异步操作的主流方式。然而，在使用 Babel 编译 ES6 代码时，我们可能会遇到一个问题：编译后的代码在使用 Promise 的 then 方法时会出现问题。
问题的表现
考虑下面这段代码：
----- ------- - --- ----------------- ------- -- -
-- ----
------------- -- -
-------------------
-- ------
---
------------------- -- -
--------------------
-------------- -- -
---------------------
---如果将这段代码使用 Babel 编译为 ES5，得到的代码如下：
---- --------
--- ------- - --- ---------------- --------- ------- -
-- ----
------------------- -- -
-------------------
-- ------
---
--------------------- -------- -
--------------------
----------------- ------- -
---------------------
---问题出现在编译后的代码中，then 方法没有被正确处理。
问题的原因
这个问题的原因与 Promise 的实现方式有关。在 Promise 中，then 方法的返回值是一个新的 Promise 对象，而在 ES5 中，没有原生的 Promise 实现，因此需要使用一个 polyfill 来实现 Promise。
在编译后的代码中，Babel 会默认使用 core-js 这个 polyfill。
core-js 实现的 Promise 略有不同，then 方法的返回值不是一个新的 Promise 对象，而是一个包含了新 Promise 对象的数组。因此，在使用 then 方法时，需要额外处理一下。
解决方法
解决这个问题的方法有两种。
1. 使用 @babel/polyfill
@babel/polyfill 是 Babel 官方推荐的解决方案。使用它可以完整地模拟 ES6 环境，包括 Promise 、Symbol 等新的语法和内置类型。
使用方法如下：
首先，在项目中安装 @babel/polyfill：
--- ------- ------ ---------------
然后，在入口文件中引入 @babel/polyfill：
------ ------------------
这样，在编译后的代码中，Promise 的 then 方法就能正常工作了。
2. 在 .babelrc 中启用 transform-runtime 插件
另一种解决方法是在 .babelrc 配置文件中启用 transform-runtime 插件，并安装 @babel/runtime。
具体步骤如下：
首先，安装 @babel/runtime：
--- ------- ------ --------------
然后，在 .babelrc 中配置 plugin：
-
---------- -
--------------------------
-
-最后，在需要使用 Promise 的代码中，导入 @babel/runtime/regenerator，例如：
------ ------------------ ---- -----------------------------
这样，在编译后的代码中，Promise 的 then 方法也能正常工作了。
总结
在使用 Babel 编译 ES6 代码时，需要注意 Promise 的 then 方法可能会出现问题。解决这个问题的方法有两种：使用 @babel/polyfill 或在 .babelrc 中启用 transform-runtime 插件。两种方法都能解决这个问题，选择哪种方法取决于个人喜好和项目环境。同时，对于像 Promise 这样的新语法和内置类型，我们应该了解其实现方式，以避免类似的问题。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64c4718383d39b48817fcdf9