前端学习手册-JavaScript函数回调地狱(十二)

上一篇提到了思考：

嵌套回调容易导致回调地狱，代码可读性差，难以维护。

那怎么解决回调地狱问题呢？使代码更优雅可读性更强？

一、使用Promise替代回调

Promise链式调用的优点:

1. 线性的代码结构，提高可读性

2. 集中的错误处理，catch可以捕获链中任意环节的错误

3. 支持Promise.all、Promise.race等并行操作

4. 更灵活的流程控制

// 将回调函数转换为返回Promise的函数
function asyncOperationPromise(name, delay) {
  return new Promise((resolve, reject) => {
    console.log(`开始执行: ${name}`);
    setTimeout(() => {
      try {
        console.log(`完成执行: ${name}`);
        resolve(`结果: ${name}`);
      } catch (error) {
        reject(error);
      }
    }, delay);
  });
}

function promiseChainSolution() {
  console.log('- Promise链式调用解决回调地狱示例:');
  asyncOperationPromise('操作A', 100)
    .then((resultA) => {
      console.log(resultA);
      return asyncOperationPromise('操作B', 100);
    })
    .then((resultB) => {
      console.log(resultB);
      return asyncOperationPromise('操作C', 100);
    })
    .then((resultC) => {
      console.log(resultC);
      return asyncOperationPromise('操作D', 100);
    })
    .then((resultD) => {
      console.log(resultD);
      console.log('所有操作完成 - 使用Promise链式调用');
    })
    .catch((error) => {
      console.error('操作失败:', error);
    });
}

执行结果

二、async/await语法（推荐）

更简洁的Promise使用方式

async/await的优点:

1. 代码看起来像同步代码，极大提高可读性

2. 使用try/catch进行错误处理，与同步代码一致

3. 更容易理解和维护，可读性更强，代码更优雅

4. JavaScript中解决异步回调地狱的最佳方案

//async/await语法
async function asyncAwaitSolution() {
  console.log('- async/await解决回调地狱示例:');
  try {
    const resultA = await asyncOperationPromise('操作A', 100);
    console.log(resultA);

    const resultB = await asyncOperationPromise('操作B', 100);
    console.log(resultB);

    const resultC = await asyncOperationPromise('操作C', 100);
    console.log(resultC);

    const resultD = await asyncOperationPromise('操作D', 100);
    console.log(resultD);

    console.log('所有操作完成 - 使用async/await');
  } catch (error) {
    console.error('操作失败:', error);
  }
}

执行结果

三、Promise.all实现并行操作 (提高性能)

async function promiseAllSolution() {
  console.log('- Promise.all并行执行异步操作示例:');

  try {
    console.log('开始并行执行所有操作');

    // 同时开始所有异步操作
    const [resultA, resultB, resultC, resultD] = await Promise.all([
      asyncOperationPromise('操作A', 300), // 故意设置不同延迟，观察并行效果
      asyncOperationPromise('操作B', 200),
      asyncOperationPromise('操作C', 100),
      asyncOperationPromise('操作D', 250)
    ]);

    console.log('所有操作并行完成，结果按顺序返回:');
    console.log(resultA);
    console.log(resultB);
    console.log(resultC);
    console.log(resultD);

    console.log('所有操作完成 - 使用Promise.all并行执行');
  } catch (error) {
    console.error('任一操作失败:', error);
  }
}

执行结果

Promise.all：

1.显著提高性能，适合无依赖关系的异步操作

2. 等待所有操作完成才继续执行

3. 任一操作失败，整体失败

根据实际业务合理选择方案，实战起来。

优先使用async/await处理异步逻辑。

一定要为异步操作添加错误处理机制，抛出错误。

保持异步函数职责单一，便于维护。

你认真学的每一行代码，未来都会开花结果。