JavaScript中的Promise

Promise 是 JavaScript 中的一个对象,代表了一个异步操作的最终完成或失败的结果。它允许您将回调从嵌套(或回调地狱)转移到更扁平、链式的调用方式。

以下是关于 Promise 的基础知识:

  1. 三种状态:

    • Pending: 初始状态,既不是成功,也不是失败。
    • Fulfilled: 意味着操作成功完成。
    • Rejected: 意味着操作失败。
  2. 构造函数:

    javascript 复制代码
    const promise = new Promise((resolve, reject) => {
        if (/* 一些异步操作成功 */) {
            resolve('Success');
        } else {
            reject('Failure');
        }
    });
  3. 方法:

    • .then(): 当 Promise 完成时,无论其是被解决还是被拒绝,都会执行该方法。
    • .catch(): 当 Promise 被拒绝时,该方法会被调用。
    • .finally(): 无论 Promise 被解决还是被拒绝,都会执行该方法。
    javascript 复制代码
    promise
        .then(result => {
            console.log(result);
        })
        .catch(error => {
            console.log(error);
        })
        .finally(() => {
            console.log('Promise settled');
        });
  4. 静态方法:

    • Promise.resolve(value) : 返回一个以给定值解析后的 Promise
    • Promise.reject(reason) : 返回一个带有拒绝原因的 Promise
    • Promise.all(iterable) : 当所有的 Promise 都完成时,该方法返回一个新的 Promise
    • Promise.race(iterable) : 返回一个 Promise,它在 iterable 中的任何一个 Promise 完成或拒绝后,就立即使用该 Promise 的值来解析或拒绝。
  5. 错误处理:

    • 如果在 Promise 内部发生错误,并且没有处理(例如没有 .catch()),则该错误不会被捕获,而是会导致应用程序崩溃或"未捕获的 promise 异常"警告。
  6. 链式调用:

    • Promise 允许链式调用 .then(),这意味着一个 .then() 可以返回另一个 Promise,这使得异步代码的组织和处理变得更加简洁。

Promise 提供了一种更优雅、可读性更强的方式来处理异步操作,而不是传统的回调函数方式。这是现代 JavaScript 中异步编程的核心概念之一,尤其在 ES6 和更高版本中。

注意: 如果Promise.all中的任何一个Promise失败(被reject),那么Promise.all本身会立即失败,并返回那个导致失败的Promise的错误值。

换句话说,Promise.all是"短路"的,只要其中一个Promise失败,它就不会等待其他的Promise,而是立即失败。

这里是一个简单的例子来说明这点:

javascript 复制代码
let p1 = Promise.resolve("Success");
let p2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        reject("Error from p2");
    }, 1000);
});
let p3 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("Success from p3");
    }, 2000);
});

Promise.all([p1, p2, p3])
    .then(values => {
        console.log(values);  // 这行不会执行
    })
    .catch(error => {
        console.log(error);  // 输出:"Error from p2"
    });

在这个例子中,尽管p3在2秒后会成功解决,但由于p2在1秒后失败,Promise.all会立即失败,并捕获到错误:"Error from p2"。

如果你想让所有的Promise都执行完,不管它们是否失败,并收集它们的结果或错误,你可能想要使用Promise.allSettled。这个API在所有的Promise都定履行(不论fulfilled或rejected)之后,返回一个新的Promise,它将解决为一个包含每个Promise的结果对象的数组。

相关推荐
美狐美颜sdk4 小时前
从人脸关键点到动态贴图:面具特效在美颜SDK中的实现原理
前端·图像处理·人工智能·直播美颜sdk·美颜api
我命由我123454 小时前
React Router 6 - 编程式路由导航、useInRouterContext、useNavigationType
前端·javascript·react.js·前端框架·html·ecmascript·js
威联通网络存储4 小时前
告别掉帧与素材损毁:威联通 QuTS hero 如何重塑影视后期协同工作流
前端·网络·人工智能·python
anOnion4 小时前
构建无障碍组件之Tabs Pattern
前端·html·交互设计
一招定胜负5 小时前
课堂教学质量综合评分系统
java·linux·前端
橙露5 小时前
JavaScript 异步编程:Promise、async/await 从原理到实战
开发语言·javascript·ecmascript
2301_780669866 小时前
前端logo替换开发
前端·vue.js
启山智软6 小时前
【启山智软智能商城系统技术架构剖析】
java·前端·架构
我命由我123456 小时前
React Router 6 - 嵌套路由、路由传递参数
前端·javascript·react.js·前端框架·html·ecmascript·js
十六年开源服务商7 小时前
2026年WordPress网站地图完整指南
java·前端·javascript