JS异步编程（二）Promise对象、Generator函数、async & await

2024-01-01 05:52:36

前言

在上一篇文章中，我们介绍了JS异步编程的基础知识，以及如何使用回调函数和事件监听器来处理异步操作。在本文中，我们将介绍Promise对象、Generator函数和async & await等更高级的异步编程方法。这些方法可以帮助我们更轻松地编写异步代码，并使代码更具可读性和可维护性。

Promise对象

Promise对象是一个表示异步操作的最终完成或失败的 JavaScript 对象。它提供了一个统一的接口来处理异步操作，并可以很容易地将多个异步操作组合在一起。

Promise对象的创建

Promise对象可以通过new Promise()方法来创建。该方法接受一个函数作为参数，该函数称为执行器函数（executor function）。执行器函数有两个参数，分别是resolve和reject。resolve用于表示异步操作成功完成，reject用于表示异步操作失败。

const promise = new Promise((resolve, reject) => {
  // 异步操作
  if (异步操作成功) {
    resolve(结果);
  } else {
    reject(错误);
  }
});

Promise对象的用法

Promise对象提供了then()和catch()两个方法来处理异步操作的结果。then()方法用于处理异步操作成功完成的情况，catch()方法用于处理异步操作失败的情况。

promise.then((结果) => {
  // 异步操作成功完成后的处理逻辑
}).catch((错误) => {
  // 异步操作失败后的处理逻辑
});

Promise对象的链式调用

Promise对象支持链式调用，即在一个then()方法中返回一个新的Promise对象，并在下一个then()方法中继续处理结果。这样可以很容易地将多个异步操作组合在一起。

promise.then((结果) => {
  return new Promise((resolve, reject) => {
    // 另一个异步操作
    if (另一个异步操作成功) {
      resolve(结果);
    } else {
      reject(错误);
    }
  });
}).then((结果) => {
  // 另一个异步操作成功后的处理逻辑
}).catch((错误) => {
  // 另一个异步操作失败后的处理逻辑
});

Generator函数

Generator函数是ES6中引入的一种新的函数类型，它可以生成一个迭代器对象。迭代器对象可以逐个地产生值，并可以通过for...of循环来遍历。

Generator函数的创建

Generator函数可以通过function*来创建。Generator函数内部可以使用yield关键字来生成值。

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

Generator函数的用法

Generator函数可以通过next()方法来生成值。next()方法会返回一个对象，该对象有两个属性：value和done。value属性表示生成的值，done属性表示Generator函数是否已经完成。

const generator = generatorFunction();
console.log(generator.next()); // { value: 1, done: false }
console.log(generator.next()); // { value: 2, done: false }
console.log(generator.next()); // { value: 3, done: false }
console.log(generator.next()); // { value: undefined, done: true }

Generator函数的异步编程

Generator函数可以很容易地用于异步编程。通过在Generator函数内部使用yield关键字，可以将异步操作的结果作为值生成出来。然后，可以通过for...of循环来遍历Generator函数，从而顺序地处理异步操作的结果。

function* asyncGeneratorFunction() {
  const result1 = yield fetch('https://example.com/api/v1/data1');
  const result2 = yield fetch('https://example.com/api/v1/data2');
  return result1 + result2;
}

(async () => {
  const generator = asyncGeneratorFunction();
  for await (const result of generator) {
    console.log(result);
  }
})();

async & await

async & await是ES8中引入的两个新的关键字，它们可以使异步代码看起来像同步代码。async关键字用于标记一个函数为异步函数，await关键字用于等待一个异步操作完成。

async function asyncFunction() {
  const result1 = await fetch('https://example.com/api/v1/data1');
  const result2 = await fetch('https://example.com/api/v1/data2');
  return result1 + result2;
}

asyncFunction().then((result) => {
  console.log(result);
});