Promise

Promise

    • [什么是 Promise?](#什么是 Promise?)
    • [创建一个 Promise](#创建一个 Promise)
    • [Promise 方法](#Promise 方法)
    • [then() 方法](#then() 方法)
    • [catch() 方法](#catch() 方法)
    • [finally() 方法](#finally() 方法)
    • [Promise 链式调用](#Promise 链式调用)
    • 异步操作与串行执行
    • [Promise.all() 和 Promise.race()](#Promise.all() 和 Promise.race())
    • 总结

什么是 Promise?

Promise 是 JavaScript 中用于处理异步操作的一种机制。它表示一个异步操作的最终完成(或失败)及其结果的表示。Promise 对象代表一个异步操作,具有三种状态:Pending(进行中)、Fulfilled(已成功)和Rejected(已失败)。

创建一个 Promise

javascript 复制代码
// 创建一个简单的 Promise 示例
    const myPromise = new Promise((resolve, reject) => {
        // 异步操作,可以是网络请求、定时器等
        setTimeout(() => {
            // 如果操作成功,则调用 resolve,并传递结果
            resolve('Operation completed successfully');
            // 如果操作失败,则调用 reject,并传递错误信息
            // reject('Operation failed');
        }, 2000);
    });

Promise 方法

then() 方法

then() 方法用于指定 Promise 成功(Fulfilled)和失败(Rejected)状态的回调函数。

javascript 复制代码
    myPromise.then(
        (result) => {
            // 成功时执行的回调函数
            console.log('Success:', result);
        },
        (error) => {
            // 失败时执行的回调函数
            console.error('Error:', error);
        }
    );

catch() 方法

catch() 方法用于捕获 Promise 中的错误。

javascript 复制代码
    myPromise.catch((error) => {
        console.error('Error caught:', error);
    });

finally() 方法

finally() 方法用于在 Promise 执行结束后执行一段代码,无论 Promise 是成功还是失败。

javascript 复制代码
	myPromise.finally(() => {
		console.log('Promise execution completed.');
	});

Promise 链式调用

Promise 支持链式调用,可以在一个 Promise 的 then() 中返回另一个 Promise。

javascript 复制代码
	 const firstPromise = new Promise((resolve) => {
        setTimeout(() => {
            resolve(10);
        }, 1000);
    });

    firstPromise
        .then((result) => {
            console.log('First promise resolved with:', result);
            return result * 2;
        })
        .then((result) => {
            console.log('Chained promise resolved with:', result);
            return result * 3;
        })
        .then((result) => {
            console.log('Final result:', result);
        });

异步操作与串行执行

Promise 可以使异步操作更为简洁,并支持串行执行异步任务。

javascript 复制代码
  const asyncTask = (value) => {
        return new Promise((resolve) => {
            setTimeout(() => {
                resolve(value * 2);
            }, 1000);
        });
    };

    asyncTask(2)
        .then((result) => asyncTask(result))
        .then((result) => asyncTask(result))
        .then((result) => {
            console.log('Final result of serial execution:', result);
        });

Promise.all() 和 Promise.race()

Promise.all()

Promise.all() 接收一个 Promise 数组,当所有 Promise 都完成时,它返回一个新的 Promise,其中包含所有 Promise 结果组成的数组。

javascript 复制代码
    const promise1 = Promise.resolve(3);
    const promise2 = 42;
    const promise3 = new Promise((resolve, reject) => {
        setTimeout(resolve, 100, 'resolved');
    });

    Promise.all([promise1, promise2, promise3]).then((values) => {
        console.log('Promise.all() result:', values);
    });

Promise.race()

Promise.race() 接收一个 Promise 数组,当数组中的任何一个 Promise 解决(无论成功或失败)时,它就会返回该 Promise 的结果。

javascript 复制代码
    const promiseA = new Promise((resolve) => {
        setTimeout(resolve, 1000, 'Promise A resolved');
    });

    const promiseB = new Promise((resolve, reject) => {
        setTimeout(reject, 500, 'Promise B rejected');
    });

    Promise.race([promiseA, promiseB]).then(
        (result) => {
            console.log('Promise.race() resolved:', result);
        },
        (error) => {
            console.error('Promise.race() rejected:', error);
        }
    );

总结

Promise 是一种处理异步操作的强大工具,它提供了更清晰的代码结构,并支持串行执行、并行执行等操作。通过链式调用和多种方法(then、catch、finally、all、race 等),可以更好地管理和处理异步操作。

相关推荐
鱼鱼块12 分钟前
《最小栈的巧妙设计:用辅助栈实现 O(1) 获取最小值》
javascript·算法·面试
San3013 分钟前
反转字符串与两数之和:两道简单题背后的 JavaScript 思维深度
javascript·算法·面试
拉不动的猪16 分钟前
判断dom元素是否在可视区域的常规方式
前端·javascript·面试
Hilaku36 分钟前
如何用隐形字符给公司内部文档加盲水印?(抓内鬼神器🤣)
前端·javascript·面试
猫头虎-前端技术39 分钟前
小白也能做AI产品?我用 MateChat 给学生做了一个会“拍照解题 + 分步教学”的AI智能老师
前端·javascript·vue.js·前端框架·ecmascript·devui·matechat
栀秋66642 分钟前
ES6+新增语法特性:重塑JavaScript的开发范式
前端·javascript
未来之窗软件服务1 小时前
幽冥大陆(三十七)文件系统路径格式化——东方仙盟筑基期
前端·javascript·文件系统·仙盟创梦ide·东方仙盟
前端加油站1 小时前
使劲折腾Element Plus的Table组件
前端·javascript·vue.js
灵犀坠2 小时前
前端核心知识体系梳理:从Vue 3到现代CSS与JavaScript
前端·javascript·vue.js
幸运小圣2 小时前
递归(Recursion)快速上手指南【JS例子】
开发语言·javascript·ecmascript