Promise链式调用

Kpsmart2025年3月7日大约 6 分钟

Promise链式调用

Promise的一个强大特性是支持链式调用，可以将多个异步操作串联起来。本文将详细介绍Promise的then()和catch()方法，以及如何构建和管理Promise链。

Promise 链的基本概念

Promise 链是通过 Promise 的 then() 和 catch() 方法将多个 Promise 连接起来，形成一个异步操作的执行序列。每个 then() 或 catch() 方法都会返回一个新的 Promise，使得链式调用成为可能。

链式调用的优势

代码扁平化：避免回调嵌套，使代码更加清晰
顺序控制：确保异步操作按照指定顺序执行
错误传播：错误会沿着链向下传递，直到被捕获
数据传递：前一个 Promise 的结果可以传递给下一个 Promise

then() 方法详解

then() 方法是 Promise 链的核心，它接收两个可选的回调函数作为参数：

promise.then(onFulfilled, onRejected);

onFulfilled：当 Promise 状态变为 fulfilled 时调用的函数
onRejected：当 Promise 状态变为 rejected 时调用的函数（可选）

then() 的返回值

then() 方法总是返回一个新的 Promise，这个新 Promise 的状态取决于 then() 中回调函数的返回值：

如果回调函数返回一个值，新 Promise 将以该值解决（fulfilled）
如果回调函数抛出一个错误，新 Promise 将以该错误拒绝（rejected）
如果回调函数返回一个 Promise，新 Promise 将采用该 Promise 的状态

// 示例1：返回一个值
Promise.resolve(1)
  .then(value => {
    console.log(value); // 输出: 1
    return value + 1;   // 返回一个值
  })
  .then(value => {
    console.log(value); // 输出: 2
  });

// 示例2：返回一个 Promise
Promise.resolve('开始')
  .then(value => {
    console.log(value); // 输出: 开始
    return new Promise(resolve => {
      setTimeout(() => resolve('延迟的数据'), 1000);
    });
  })
  .then(value => {
    console.log(value); // 1秒后输出: 延迟的数据
  });

// 示例3：抛出错误
Promise.resolve('正常数据')
  .then(value => {
    console.log(value); // 输出: 正常数据
    throw new Error('出错了');
  })
  .then(
    value => {
      console.log('这不会执行');
    },
    error => {
      console.error(error.message); // 输出: 出错了
    }
  );

值传递

Promise 链的一个重要特性是可以在链中传递值：

function fetchUserData(userId) {
  return fetch(`https://api.example.com/users/${userId}`)
    .then(response => {
      if (!response.ok) {
        throw new Error('获取用户数据失败');
      }
      return response.json();
    })
    .then(userData => {
      console.log('用户数据:', userData);
      return fetch(`https://api.example.com/posts?userId=${userData.id}`);
    })
    .then(response => {
      if (!response.ok) {
        throw new Error('获取用户文章失败');
      }
      return response.json();
    })
    .then(posts => {
      console.log('用户文章:', posts);
      return { user: userData, posts: posts };
    });
}

// 使用
fetchUserData(1)
  .then(result => {
    console.log('最终结果:', result);
  })
  .catch(error => {
    console.error('出错了:', error.message);
  });

catch() 方法详解

catch() 方法是 then(null, onRejected) 的语法糖，用于捕获 Promise 链中的错误：

promise.catch(onRejected);

// 等同于
promise.then(null, onRejected);

错误处理模式

在 Promise 链中有两种常见的错误处理模式：

1. 在链末尾使用一个 catch

fetchData()
  .then(step1)
  .then(step2)
  .then(step3)
  .catch(error => {
    console.error('任何步骤出错:', error);
  });

这种模式会捕获链中任何位置抛出的错误。

2. 在每个步骤中处理特定错误

fetchData()
  .then(step1)
  .catch(error => {
    console.error('fetchData 或 step1 出错:', error);
    return defaultDataForStep1; // 提供默认值继续链
  })
  .then(step2)
  .catch(error => {
    console.error('step2 出错:', error);
    return defaultDataForStep2; // 提供默认值继续链
  })
  .then(step3)
  .catch(error => {
    console.error('step3 出错:', error);
  });

这种模式可以在错误发生后恢复链的执行。

错误恢复

catch() 后面可以继续链接 then()，实现错误恢复：

fetchData()
  .then(data => {
    if (data.incomplete) {
      throw new Error('数据不完整');
    }
    return processData(data);
  })
  .catch(error => {
    console.error('处理出错:', error.message);
    return fetchBackupData(); // 获取备用数据
  })
  .then(result => {
    // 这里的 result 可能来自 processData 或 fetchBackupData
    console.log('最终结果:', result);
  });

构建复杂的 Promise 链

顺序执行异步操作

当需要按顺序执行多个异步操作，并且每个操作依赖于前一个操作的结果时：

function sequentialAsyncOperations(initialData) {
  return Promise.resolve(initialData)
    .then(data => {
      console.log('步骤 1:', data);
      return asyncOperation1(data);
    })
    .then(result1 => {
      console.log('步骤 2:', result1);
      return asyncOperation2(result1);
    })
    .then(result2 => {
      console.log('步骤 3:', result2);
      return asyncOperation3(result2);
    })
    .then(finalResult => {
      console.log('最终结果:', finalResult);
      return finalResult;
    });
}

动态构建 Promise 链

有时需要根据数据动态构建 Promise 链：

function processItems(items) {
  // 从一个初始 Promise 开始
  return items.reduce((chain, item) => {
    // 对每个 item，在链上添加一个新的 Promise
    return chain.then(results => {
      // 处理当前 item
      return processItem(item).then(result => {
        // 将结果添加到累积的结果数组中
        results.push(result);
        return results;
      });
    });
  }, Promise.resolve([])); // 初始值是一个包含空数组的已解决 Promise
}

// 使用
const items = [1, 2, 3, 4, 5];
processItems(items)
  .then(results => {
    console.log('所有项处理完成:', results);
  })
  .catch(error => {
    console.error('处理过程中出错:', error);
  });

并行与串行结合

有时需要在 Promise 链中结合并行和串行操作：

function complexProcessing(data) {
  return Promise.resolve(data)
    // 第一步：串行处理
    .then(initialData => {
      return prepareData(initialData);
    })
    // 第二步：并行处理多个任务
    .then(preparedData => {
      const task1 = processTask1(preparedData);
      const task2 = processTask2(preparedData);
      const task3 = processTask3(preparedData);
      
      // 等待所有任务完成
      return Promise.all([task1, task2, task3]);
    })
    // 第三步：合并结果
    .then(([result1, result2, result3]) => {
      return combineResults(result1, result2, result3);
    })
    // 第四步：最终处理
    .then(combinedResult => {
      return finalizeResult(combinedResult);
    });
}

Promise 链的最佳实践

1. 始终返回值或 Promise

在 then() 回调中始终返回值或 Promise，以保持链的连续性：

// 好的做法
getData()
  .then(data => {
    // 处理数据
    return transformData(data); // 返回处理结果
  })
  .then(transformedData => {
    // 使用转换后的数据
  });

// 不好的做法
getData()
  .then(data => {
    // 处理数据但没有返回值
    transformData(data);
  })
  .then(transformedData => {
    // transformedData 是 undefined，因为前一个 then 没有返回值
    console.log(transformedData); // undefined
  });

2. 适当拆分 Promise 链

对于复杂的逻辑，将 Promise 链拆分为更小的函数：

// 不好的做法：一个很长的链
fetchData()
  .then(data => {
    // 处理数据...
  })
  .then(result => {
    // 更多处理...
  })
  // ... 更多 then ...
  .catch(error => {
    // 错误处理
  });

// 好的做法：拆分为多个函数
function fetchAndProcessData() {
  return fetchData()
    .then(processInitialData);
}

function processInitialData(data) {
  // 处理数据
  return transformedData;
}

// 使用
fetchAndProcessData()
  .then(furtherProcessing)
  .catch(handleErrors);

3. 避免嵌套 Promise

避免在 then() 回调中嵌套 Promise，应该使用链式调用：

// 不好的做法：嵌套 Promise
fetchUser(userId)
  .then(user => {
    fetchPosts(user.id)
      .then(posts => {
        // 处理用户和文章
      })
      .catch(error => {
        // 处理文章获取错误
      });
  })
  .catch(error => {
    // 处理用户获取错误
  });

// 好的做法：扁平化链
fetchUser(userId)
  .then(user => {
    // 保存用户信息并返回下一个 Promise
    currentUser = user;
    return fetchPosts(user.id);
  })
  .then(posts => {
    // 现在可以使用 currentUser 和 posts
  })
  .catch(error => {
    // 处理任何错误
  });

4. 合理使用 catch

在链中的适当位置使用 catch()，而不仅仅是在末尾：

fetchData()
  .then(data => {
    try {
      return JSON.parse(data);
    } catch (e) {
      throw new Error('数据解析失败');
    }
  })
  .catch(error => {
    // 处理网络错误或解析错误
    console.error('初始处理失败:', error);
    return fetchBackupData(); // 尝试备用方案
  })
  .then(processData)
  .catch(error => {
    // 处理处理数据时的错误
    console.error('数据处理失败:', error);
    return defaultProcessedData;
  })
  .then(finalStep)
  .catch(error => {
    // 处理最终步骤的错误
    console.error('最终步骤失败:', error);
  });

总结

Promise 链式调用是处理复杂异步流程的强大工具，它通过 then() 和 catch() 方法将多个异步操作连接起来，形成清晰的执行序列。

主要优点：

代码扁平化，避免回调嵌套
清晰的错误处理机制
灵活的数据传递
精确的异步流程控制

通过合理构建 Promise 链，我们可以编写出更加清晰、可维护的异步代码。在下一章中，我们将探讨 Promise 的错误处理机制，以及如何更好地管理异步操作中的异常情况。