ECMAScript 2018 中的 Async Function 和 Generator 函数的异同

随着前端开发中异步编程需求的增加，ECMAScript 2018 引入了 Async Function 和 Generator 函数两种新的函数类型，两种函数都可以帮助我们更好的处理异步任务。本文将详细介绍这两种函数类型的区别和共同点，并且提供实际应用场景以及示例代码，以便帮助我们更好的理解使用这两种函数类型。

Async Function 和 Generator 函数的基本定义

Async Function：是一种函数声明或表达式，使用 async 关键词声明，可以更方便地编写基于 Promise 的异步代码。基本语法：

async function foo() {
  // ...code goes here
}

Generator 函数：是一种函数声明或表达式，使用 function* 关键字声明，可以通过迭代的方式，异步地执行一段代码。基本语法：

function* bar() {
  // ...code goes here
}

在两种函数类型中，函数的返回值都是 Promise 对象，但是在语法和功能上两种函数还有许多不同之处。

Async Function 和 Generator 函数的异同

1. 简洁程度

异同点：Async Function 更加直观和简洁，不需要使用 yield 关键字。它能够在不使用 Promise 的情况下，直接通过 await 关键字来处理异步代码。相比 Generator 函数，使得代码更加简单、易读、易理解。

async function myFetch(url) {
  const response = await fetch(url);
  const data = await response.json();
  return data;
}

function* myFetch(url) {
  const response = yield fetch(url);
  const data = yield response.json();
  return data;
}

2. 执行流程

相同点：两种函数类型均能够处理异步任务，但是它们的执行流程却是不同的。

• Generator 函数：执行器（函数调用）控制代码的执行，每次调用 next() 方法执行下一段代码，并且每个代码段的结束都由 yield 关键字来标记。
• Async Function：自动执行，函数会阻塞直到引擎遇到 await 关键字，它会暂时中断函数的执行，等待 Promise 对象被 resolve 再继续执行。

3. 错误处理

异同点：两种函数均可以处理异步请求中的错误，但是错误处理机制不同。

• Generator 函数：需要使用 try-catch 语句来捕获错误，否则出现错误就会中断代码的执行。
• Async Function：可以使用 try-catch 语句捕获错误，也可以使用 Promise 的 .catch() 方法来捕获错误，还能够使用 throw 语句来抛出错误。

-- -------------------- ---- -------
----- -------- ------------ -
  --- -
    ----- -------- - ----- -----------
    ----- ---- - ----- ----------------
    ------ -----
  - ----- ------- -
    -------------------
  -
-
展开代码

-- -------------------- ---- -------
--------- ------------ -
  --- -
    ----- -------- - ----- -----------
    ----- ---- - ----- ----------------
    ------ -----
  - ----- ------- -
    -------------------
  -
-
展开代码

4. 控制流程

异同点：Generator 函数可以更好地控制异步流程，可以执行多个异步任务但只有一个协程。

function* getStockPrice(stock) {
  try {
    const price = yield http.get('http://api.example.com/stock-price/' + stock);
    console.log('Stock price of ' + stock + ' is ' + price);
  } catch (error) {
    console.log('Error:', error);
  }
}

相较之下，Async Function 只能控制一个异步任务，但相比 Generator 函数，Async Function 更加简单易用。

async function getStockPrice(stock) {
  try {
    const price = await http.get('http://api.example.com/stock-price/' + stock);
    console.log('Stock price of ' + stock + ' is ' + price);
  } catch (error) {
    console.log('Error:', error);
  }
}

结束语

总体来看，Async Function 更加直观而且简单易懂，使用上也更加方便，适用于绝大多数情况。而 Generator 函数具备更大的灵活性和控制能力，更适合在异步流程更复杂的情况下使用。通过本文的介绍和示例代码，我们可以更好地理解和使用这两种函数类型，在实际应用中可以根据需求进行选择，以达到更好的代码效果。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/679356e4504e4ea9bd790aa6