Promise的总结

一、基本概念

  • Promise 是异步编程的解决方案,用于处理异步操作
  • 代表一个未来才会知道结果的事件(通常是异步操作)
  • 状态一旦改变就不会再变

二、三种状态

  1. pending(进行中) - 初始状态
  2. fulfilled(已成功) - 操作成功完成
  3. rejected(已失败) - 操作失败

状态转换:
pendingfulfilledpendingrejected

三、基本用法

javascript

javascript 复制代码
const promise = new Promise((resolve, reject) => {
  // 异步操作
  if (/* 成功 */) {
    resolve(value);  // 状态变为fulfilled
  } else {
    reject(error);   // 状态变为rejected
  }
});

promise.then(
  value => { /* 成功处理 */ },
  error => { /* 失败处理 */ }
);

四、实例方法

1. then() - 主要处理方法

javascript

arduino 复制代码
promise.then(
  onFulfilled,  // 成功回调
  onRejected    // 失败回调(可选)
);

2. catch() - 错误处理

javascript

ini 复制代码
promise.catch(error => {
  // 处理错误(等同于then(null, onRejected))
});

3. finally() - 最终执行

javascript

dart 复制代码
promise.finally(() => {
  // 无论成功失败都会执行
});

五、静态方法

1. Promise.resolve() - 创建已完成的Promise

javascript

ini 复制代码
Promise.resolve(value);

2. Promise.reject() - 创建已拒绝的Promise

javascript

ini 复制代码
Promise.reject(reason);

3. Promise.all() - 所有完成才完成

javascript

ini 复制代码
Promise.all([p1, p2, p3])
  .then(values => { /* 所有都成功 */ })
  .catch(error => { /* 有一个失败就失败 */ });

4. Promise.race() - 竞速,第一个完成/拒绝的

javascript

ini 复制代码
Promise.race([p1, p2, p3])
  .then(value => { /* 第一个完成的 */ });

5. Promise.allSettled() - 所有都完成(无论成功失败)

javascript

ini 复制代码
Promise.allSettled([p1, p2, p3])
  .then(results => { /* 所有promise都已完成 */ });

6. Promise.any() - 任意一个成功就成功

javascript

ini 复制代码
Promise.any([p1, p2, p3])
  .then(value => { /* 第一个成功的 */ });

六、链式调用

javascript

dart 复制代码
promise
  .then(value => { /* 第一步 */ })
  .then(value => { /* 第二步 */ })
  .catch(error => { /* 错误处理 */ })
  .finally(() => { /* 清理 */ });

特点:

  • 每个then()返回新的Promise
  • 可以传递值给下一个then()
  • 错误会沿着链向后传递

七、错误处理最佳实践

javascript

scss 复制代码
// 推荐:使用catch处理错误
promise
  .then(handleSuccess)
  .catch(handleError);

// 避免:then中第二个参数和catch混用
promise
  .then(handleSuccess, handleError)  // 可能无法捕获then中的错误
  .catch(handleOtherError);           // 可能不会执行

八、与async/await结合

javascript

csharp 复制代码
async function fetchData() {
  try {
    const result = await promise;
    // 处理结果
  } catch (error) {
    // 处理错误
  }
}

九、优缺点

优点:

  1. 解决回调地狱,代码更清晰
  2. 更好的错误处理机制
  3. 支持链式调用
  4. 提供了丰富的静态方法

缺点:

  1. 无法取消Promise
  2. 错误需要显式捕获
  3. 状态单一,不能监听进度

十、常见使用场景

  1. AJAX请求 - 替代XMLHttpRequest
  2. 定时器操作 - setTimeout封装
  3. 文件读取 - Node.js文件操作
  4. 数据库操作 - 异步查询
  5. 多个异步操作协调 - 使用Promise.all等

十一、注意事项

  1. Promise内部错误会被吞没,必须使用catch
  2. Promise创建即执行,不能中途取消
  3. 状态不可逆,一旦改变无法回退
  4. then()中的错误需要显式处理

十二、现代JavaScript实践

javascript

javascript 复制代码
// ES2020+ 推荐写法
const fetchUser = async (userId) => {
  try {
    const response = await fetch(`/api/users/${userId}`);
    if (!response.ok) throw new Error('Network error');
    return await response.json();
  } catch (error) {
    console.error('Fetch failed:', error);
    throw error; // 重新抛出
  }
};

Promise是现代JavaScript异步编程的核心,虽然现在有async/await语法糖,但理解Promise是掌握JavaScript异步编程的基础。

相关推荐
兆子龙1 天前
像 React Hook 一样「自动触发」:用 Git Hook 拦住忘删的测试代码与其它翻车现场
前端·架构
兆子龙1 天前
用 Auto.js 实现挂机脚本:从找图点击到循环自动化
前端·架构
SuperEugene1 天前
表单最佳实践:从 v-model 到自定义表单组件(含校验)
前端·javascript·vue.js
昨晚我输给了一辆AE861 天前
为什么现在不推荐使用 React.FC 了?
前端·react.js·typescript
不会敲代码11 天前
深入浅出 React 闭包陷阱:从现象到原理
前端·react.js
不会敲代码11 天前
React性能优化:深入理解useMemo和useCallback
前端·javascript·react.js
Dilettante2581 天前
我的 Monorepo 实践经验:从基础概念到最佳实践
前端·前端工程化
只会cv的前端攻城狮1 天前
Elpis-Core — 融合 Koa 洋葱圈模型实现服务端引擎
前端·后端
Java小卷1 天前
流程设计器为啥选择diagram-js
前端·低代码·工作流引擎
HelloReader1 天前
Isolation Pattern(隔离模式)在前端与 Core 之间加一道“加密网关”,拦截与校验所有 IPC
前端