用Generator函数解决Promise回调地狱，让异步编程更优雅

2023-11-03 09:02:42

前言

在JavaScript中，异步编程是不可避免的，比如网络请求、定时器、文件读写等。而异步编程最常见的写法就是使用回调函数。然而，当回调函数层层嵌套时，就会形成所谓的回调地狱，代码可读性差，难以维护。

Generator函数作为一种协程，可以将异步操作包装成同步的方式，从而解决回调地狱问题，让异步编程更加优雅。

Generator函数简介

Generator函数是ES6引入的一种新的函数类型，它可以生成一个迭代器对象。迭代器对象是一个具有next()方法的对象，每次调用next()方法都会返回一个包含value和done两个属性的对象。value属性是当前迭代器对象的值，done属性是一个布尔值，表示迭代是否完成。

Generator函数的语法与普通函数相似，只是在函数名后面加一个星号(*)。在Generator函数内部，可以使用yield来生成迭代器对象。yield关键字可以将当前函数暂停，并将控制权交给调用者。当调用者再次调用next()方法时，函数将从yield处继续执行。

例如，以下是一个简单的Generator函数：

function* generateSequence(start, end) {
  for (let i = start; i <= end; i++) {
    yield i;
  }
}

这个Generator函数生成一个从start到end的整数序列。我们可以通过以下方式来使用这个Generator函数：

const generator = generateSequence(1, 5);

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: 4, done: false }
console.log(generator.next()); // { value: 5, done: false }
console.log(generator.next()); // { value: undefined, done: true }

Generator函数与Promise

Promise是JavaScript中处理异步操作的另一种方式。Promise对象表示一个异步操作的最终完成或失败的结果。Promise对象有一个then()方法，可以注册回调函数，当Promise对象的状态改变时，就会调用这些回调函数。

Generator函数和Promise都可以用来处理异步操作，但它们的工作方式不同。Generator函数将异步操作包装成同步的方式，而Promise则将异步操作包装成一个对象。

Generator函数的优势在于，它可以使代码更加简洁和易读。而Promise的优势在于，它可以更好地处理错误。

用Generator函数解决Promise回调地狱

现在，我们来看一下如何用Generator函数解决Promise回调地狱问题。

假设我们有一个需求，需要用户确认后继续执行原有逻辑之后的逻辑。常规的做法是抽离原有逻辑，然后在用户确认后调用这个逻辑。

function confirmAndContinue(callback) {
  // 显示确认对话框
  if (confirm("是否继续？")) {
    // 调用回调函数
    callback();
  }
}

function originalLogic() {
  // 执行原有逻辑
}

// 调用confirmAndContinue函数
confirmAndContinue(originalLogic);

上面的代码中，我们在confirmAndContinue函数中使用了回调函数来处理用户确认后的逻辑。这种写法虽然可以实现我们的需求，但代码可读性差，难以维护。

现在，我们使用Generator函数来重写上面的代码：

function* confirmAndContinue() {
  // 显示确认对话框
  const confirmed = confirm("是否继续？");

  // 如果用户确认，则继续执行原有逻辑
  if (confirmed) {
    yield originalLogic();
  }
}

// 使用Generator函数
const generator = confirmAndContinue();

// 调用next()方法来执行Generator函数
generator.next();