深入理解You Don't Know JS中的ES6异步流程控制-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00342/article/details/148490719

深入理解You Don't Know JS中的ES6异步流程控制

You-Dont-Know-JS 📗📒 (PT-Br translation) JS Book Series. 项目地址: https://gitcode.com/gh_mirrors/you/You-Dont-Know-JS

前言

在JavaScript开发中，异步编程是每个开发者必须掌握的核心技能。传统的回调函数(callback)方式虽然简单直接，但随着应用复杂度增加，回调地狱(callback hell)问题日益突出。ES6引入的Promise和Generator为解决这些问题带来了革命性的改变。

Promise：异步编程的新范式

Promise的核心概念

Promise本质上是一个异步操作的占位符，它代表一个尚未完成但预期将来会完成的操作。与回调函数不同，Promise提供了更结构化和可组合的方式来处理异步操作。

Promise有三种状态：

pending（等待中）
fulfilled（已成功）
rejected（已失败）

一旦Promise的状态从pending转变为fulfilled或rejected，就不可再改变。

创建和使用Promise

const promise = new Promise((resolve, reject) => {
  // 异步操作
  if (/* 操作成功 */) {
    resolve(value); // 将Promise状态改为fulfilled
  } else {
    reject(error); // 将Promise状态改为rejected
  }
});

Promise链式调用

Promise的真正威力在于其链式调用能力：

doSomething()
  .then(result => doSomethingElse(result))
  .then(newResult => doThirdThing(newResult))
  .catch(error => console.error(error));

每个.then()都会返回一个新的Promise，这使得我们可以构建清晰的异步操作序列。

Promise实用方法

ES6提供了几个实用的Promise静态方法：

Promise.all() - 等待所有Promise完成
Promise.race() - 只等待第一个完成的Promise
Promise.resolve() - 创建一个已解决的Promise
Promise.reject() - 创建一个已拒绝的Promise

Thenable对象

Thenable是指任何拥有.then()方法的对象或函数。Promise机制可以接受并处理Thenable对象，这使得Promise可以与各种异步库进行互操作。

const thenable = {
  then: function(resolve, reject) {
    resolve(42);
  }
};

Promise.resolve(thenable)
  .then(value => console.log(value)); // 42

Generator与Promise的完美结合

Generator函数可以暂停和恢复执行的特性，与Promise的异步控制能力相结合，可以创造出更优雅的异步代码结构。

基本模式

function* main() {
  try {
    const result1 = yield step1();
    const result2 = yield step2(result1);
    const result3 = yield step3(result2);
    console.log(result3);
  } catch (err) {
    console.error(err);
  }
}

运行Generator的辅助函数

为了使Generator能够自动执行，我们需要一个运行器(runner)：

function run(generator) {
  const it = generator();
  
  function handle(result) {
    if (result.done) return result.value;
    
    return Promise.resolve(result.value)
      .then(
        value => handle(it.next(value)),
        error => handle(it.throw(error))
      );
  }
  
  return handle(it.next());
}

实际应用示例

function* fetchData() {
  try {
    const user = yield fetch('/api/user');
    const posts = yield fetch(`/api/posts/${user.id}`);
    return { user, posts };
  } catch (error) {
    console.error("获取数据失败:", error);
  }
}

run(fetchData)
  .then(data => console.log(data));