在前端开发中，异步编程是一个非常重要的概念。异步编程可以让程序在执行某些任务时不会阻塞后续代码的执行，从而提高程序的性能。在 JavaScript 中，Promise 和 Generator 函数是两个非常常用的异步编程工具。
Promise
Promise 是一种异步编程的解决方案，它可以让程序在执行某些异步任务时，不必使用回调函数，而是通过 Promise 对象来处理异步任务的结果。Promise 对象有三种状态：Pending（进行中）、Resolved（已完成）和Rejected（已失败）。当异步任务完成时，Promise 对象会从 Pending 状态转变为 Resolved 状态，并返回异步任务的结果；当异步任务失败时，Promise 对象会从 Pending 状态转变为 Rejected 状态，并返回失败的原因。
下面是一个使用 Promise 处理异步任务的示例代码：
-- -------------------- ---- -------
-------- --------- -
------ --- ----------------- ------- -- -
------------- -- -
----------------
-- ------
---
-
----------------------- -- -
--------------------
---------------- -- -
---------------------
---在上面的代码中，我们定义了一个名为 getData 的函数，它返回一个 Promise 对象。在 Promise 对象的构造函数中，我们使用了一个 setTimeout 函数来模拟异步任务的执行。当异步任务完成后，我们调用 resolve 函数，并将异步任务的结果传递给它。在 getData 函数的调用处，我们使用了 then 方法来处理异步任务的结果。如果异步任务执行成功，then 方法会接收到 resolve 函数的参数，并将其打印到控制台中。如果异步任务执行失败，catch 方法会接收到 reject 函数的参数，并将其打印到控制台中。
Generator 函数
Generator 函数是一种特殊的函数，它可以在函数体内部暂停执行，并在后续某个时刻继续执行。Generator 函数可以通过 yield 关键字来暂停执行，并通过 next 方法来继续执行。Generator 函数的执行结果是一个迭代器对象，我们可以通过迭代器对象的 next 方法来依次获取 Generator 函数的返回值。Generator 函数可以用来处理异步任务，因为它可以在异步任务执行完成后再继续执行。
下面是一个使用 Generator 函数处理异步任务的示例代码：
-- -------------------- ---- -------
--------- --------- -
----- ---- - ----- --- ----------------- -- -
------------- -- -
----------------
-- ------
---
------------------
-
----- --------- - ----------
----- ------- - -----------------------
--------------------- -- -
-----------------------
---------------- -- -
---------------------
---在上面的代码中，我们定义了一个名为 getData 的 Generator 函数。在函数体内部，我们使用了 yield 关键字来暂停执行，并返回一个 Promise 对象。在 Promise 对象的构造函数中，我们使用了一个 setTimeout 函数来模拟异步任务的执行。当异步任务完成后，我们调用 resolve 函数，并将异步任务的结果传递给它。在 getData 函数的调用处，我们使用了 next 方法来继续执行 Generator 函数。当 next 方法被调用时，Generator 函数会继续执行，并将 yield 关键字后面的表达式的值赋给变量 data。最后，我们将变量 data 打印到控制台中。
Promise 和 Generator 函数的结合使用
Promise 和 Generator 函数可以结合使用，以实现更复杂的异步编程任务。我们可以使用 Generator 函数来组织异步任务的执行顺序，使用 Promise 对象来处理异步任务的结果。通过这种方式，我们可以让异步编程变得更加灵活和可读。
下面是一个使用 Promise 和 Generator 函数结合使用的示例代码：
-- -------------------- ---- -------
-------- --------- -
------ --- ----------------- ------- -- -
------------- -- -
----------------
-- ------
---
-
--------- ------ -
--- -
----- ---- - ----- ----------
------------------
- ----- ------- -
---------------------
-
-
----- --------- - -------
----- ------- - -----------------------
--------------------- -- -
-----------------------
---------------- -- -
-----------------------
---在上面的代码中，我们定义了一个名为 main 的 Generator 函数。在函数体内部，我们使用了 yield 关键字来暂停执行，并返回一个 Promise 对象。在 getData 函数的调用处，我们使用了 next 方法来继续执行 Generator 函数。当 next 方法被调用时，Generator 函数会继续执行，并将 yield 关键字后面的表达式的值赋给变量 data。最后，我们将变量 data 打印到控制台中。如果异步任务执行失败，我们可以使用 try-catch 语句来捕获异常，并将异常信息打印到控制台中。
总结
在本文中，我们介绍了 Promise 和 Generator 函数两种异步编程工具，并给出了相应的示例代码。Promise 和 Generator 函数可以结合使用，以实现更复杂的异步编程任务。异步编程是前端开发中非常重要的一个概念，我们需要熟练掌握异步编程工具，以提高程序的性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65c7855cadd4f0e0ff18c2a1