Promise 和 Generator 函数深入学习

Promise

Promise 是一种异步编程的解决方案，其本质是对回调函数的改进。Promise 可以解决回调函数嵌套过深的问题，使得异步代码更加清晰明了。Promise 的状态分为三种：pending（进行中）、fulfilled（已成功）和 rejected（已失败）。

Promise 的基本用法

const promise = new Promise((resolve, reject) => {
  // 异步操作
  if (异步操作成功) {
    resolve(value)  // 成功时调用 resolve 函数
  } else {
    reject(error)   // 失败时调用 reject 函数
  }
})

promise.then((value) => {
  // 异步操作成功时执行的代码
}).catch((error) => {
  // 异步操作失败时执行的代码
})

Promise.all 和 Promise.race

Promise.all 和 Promise.race 是 Promise 的两个常用方法。Promise.all 接收一个 Promise 数组作为参数，当这些 Promise 都执行成功时，返回一个包含所有 Promise 返回值的数组；当其中任意一个 Promise 执行失败时，返回失败的 Promise。

Promise.all([promise1, promise2, promise3])
  .then(([result1, result2, result3]) => {
    // 所有 Promise 都成功时执行的代码
  })
  .catch((error) => {
    // 任意一个 Promise 失败时执行的代码
  })

Promise.race 接收一个 Promise 数组作为参数，当其中任意一个 Promise 执行成功时，返回成功的 Promise；当其中任意一个 Promise 执行失败时，返回失败的 Promise。

Promise.race([promise1, promise2, promise3])
  .then((result) => {
    // 任意一个 Promise 成功时执行的代码
  })
  .catch((error) => {
    // 任意一个 Promise 失败时执行的代码
  })

Generator 函数

Generator 函数是 ES6 中新增的一种特殊函数，可以控制函数的执行。Generator 函数通过 yield 关键字可以暂停函数的执行，并在需要时恢复执行。Generator 函数返回一个迭代器对象，通过迭代器的 next 方法可以控制函数的执行。

Generator 函数的基本用法

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

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 函数可以用于异步编程，将异步操作封装为一个 Promise，然后通过 yield 关键字暂停函数的执行，等待 Promise 的结果返回后再恢复执行。

function* generatorFunction() {
  const result = yield new Promise((resolve, reject) => {
    // 异步操作
    if (异步操作成功) {
      resolve(value)
    } else {
      reject(error)
    }
  })

  console.log(result)
}

const generator = generatorFunction()

const promise = generator.next().value

promise.then((result) => {
  generator.next(result)
}).catch((error) => {
  generator.throw(error)
})

Promise 和 Generator 函数的结合应用

Promise 和 Generator 函数可以结合使用，将异步操作封装为一个 Promise，然后通过 yield 关键字暂停函数的执行，等待 Promise 的结果返回后再恢复执行。

function* generatorFunction() {
  try {
    const result1 = yield promise1
    console.log(result1)
    const result2 = yield promise2
    console.log(result2)
  } catch (error) {
    console.error(error)
  }
}

const generator = generatorFunction()

function execute(generator, yieldValue) {
  const result = generator.next(yieldValue)

  if (result.done) {
    return result.value
  }

  result.value.then((value) => {
    execute(generator, value)
  }).catch((error) => {
    generator.throw(error)
  })
}

execute(generator)

总结

Promise 和 Generator 函数是异步编程的两种解决方案，它们可以单独使用，也可以结合使用。使用 Promise 和 Generator 函数可以使异步代码更加清晰明了，提高代码的可读性和可维护性。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/658f70d5eb4cecbf2d511c2c