JavaScript中yield/next与async/await的异同

2023-12-14 18:40:46

JavaScript中的Generator函数

Generator函数是JavaScript中的一种特殊函数，它可以被暂停和恢复。这使得我们能够更好地控制异步函数的执行，并使其更易于理解。

Generator函数的声明方式与普通函数类似，只是在函数名之前加一个星号(*)。例如：

function* generatorFunction() {
  yield 1;
  yield 2;
  yield 3;
}

Generator函数的暂停和恢复是通过yield和next实现的。当遇到yield关键字时，函数会暂停执行，并将当前状态保存起来。当调用next()方法时，函数会从保存的状态继续执行，并返回yield表达式的值。

例如，以下代码使用generator函数来生成斐波那契数列：

function* fibonacci() {
  let a = 0, b = 1;
  while (true) {
    yield a;
    [a, b] = [b, a + b];
  }
}

const fibonacciGenerator = fibonacci();

console.log(fibonacciGenerator.next()); // { value: 0, done: false }
console.log(fibonacciGenerator.next()); // { value: 1, done: false }
console.log(fibonacciGenerator.next()); // { value: 1, done: false }
console.log(fibonacciGenerator.next()); // { value: 2, done: false }
console.log(fibonacciGenerator.next()); // { value: 3, done: false }

JavaScript中的Async函数

Async函数是JavaScript中另一种用于异步编程的语法糖。它使得我们能够使用await关键字来暂停函数的执行，直到异步操作完成。

Async函数的声明方式与普通函数类似，只是在函数名之前加一个async关键字。例如：

async function asyncFunction() {
  const result = await fetch('https://example.com');
  return result.json();
}

Async函数的暂停和恢复是通过await关键字实现的。当遇到await关键字时，函数会暂停执行，并等待异步操作完成。当异步操作完成后，函数会从保存的状态继续执行，并将异步操作的结果作为await表达式的值。

例如，以下代码使用async函数来获取一个URL的JSON数据：

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

fetchJSON('https://example.com').then(data => {
  console.log(data);
});