7 # promise 的 then 方法

简介: 7 # promise 的 then 方法

promise 调用 then 方法时可能当前的 promise 并没有成功,而是处于 pending 状态

我们先看没有处理的效果:

let KaimoPromise = require("./7/kaimo-promise.js");
let promise = new KaimoPromise((resolve, reject) => {
    console.log(1);
    setTimeout(() => {
        // throw new Error("异常");
        resolve("成功");
        // reject("失败");
    }, 1000);
});
console.log(2);
promise.then(
    (data) => {
        console.log("success1", data);
    },
    (err) => {
        console.log("failed1", err);
    }
);
promise.then(
    (data) => {
        console.log("success2", data);
    },
    (err) => {
        console.log("failed2", err);
    }
);

我们可以看到并没有打印出成功的信息:

下面我们针对这种问题处理一下:如果当前状态是 pending 时,我们需要将成功的回调和失败的回调存放起来,稍后调用 resolve 跟 reject 的时候重新执行(采用发布订阅的模式处理)

// promise 就是一个类
// 1. promise 有三个状态:成功态(resolve) 失败态(reject) 等待态(pending)(又不成功又不失败)
// 2. 用户自己决定失败的原因和成功的原因,成功和失败也是用户定义的
// 3. promise 默认执行器立即执行
// 4. promise 的实例都拥有一个 then 方法,一个参数是成功的回调,另一个是失败的回调
// 5. 如果执行函数时发生了异常也会执行失败的逻辑
// 6. 如果 promise 一旦成功就不能失败,反之亦然,只有等待态的时候才能去更新状态
const RESOLVE = "RESOLVE"; // 成功态
const REJECT = "REJECT"; // 失败态
const PENDING = "PENDING"; // 等待态
class KaimoPromise {
    constructor(executor) {
        this.status = PENDING;
        // value 是任意合法的 Javascript 值,(包括 undefined,thenable, promise)。
        this.value = undefined;
        // reason 是表示 promise 为什么被 rejected 的值
        this.reason = undefined;
        // 存放成功回调
        this.onResolveCallbacks = [];
        // 存放失败回调
        this.onRejectCallbacks = [];
        let resolve = (value) => {
            if (this.status === PENDING) {
                this.value = value;
                this.status = RESOLVE;
                this.onResolveCallbacks.forEach((fn) => fn());
            }
        };
        let reject = (reason) => {
            if (this.status === PENDING) {
                this.reason = reason;
                this.status = REJECT;
                this.onRejectCallbacks.forEach((fn) => fn());
            }
        };
        try {
            // 立即执行
            executor(resolve, reject);
        } catch (error) {
            // 处理错误异常
            reject(error);
        }
    }
    // promise 必须提供 then 方法来存取它当前或最终的值或者原因。
    // then 接收两个参数:onFulfilled 和 onRejected
    then(onFulfilled, onRejected) {
        if (this.status === RESOLVE) {
            onFulfilled(this.value);
        }
        if (this.status === REJECT) {
            onRejected(this.reason);
        }
        if (this.status === PENDING) {
            this.onResolveCallbacks.push(() => {
                onFulfilled(this.value);
            });
            this.onRejectCallbacks.push(() => {
                onRejected(this.reason);
            });
        }
    }
}
module.exports = KaimoPromise;

这样我们就能看到成功的信息:

目录
相关文章
|
6月前
|
前端开发
【面试题】吃透Promise?先实现一个再说(包含所有方法)(二)
【面试题】吃透Promise?先实现一个再说(包含所有方法)(二)
|
6月前
|
存储 运维 前端开发
【面试题】吃透Promise?先实现一个再说(包含所有方法)(一)
【面试题】吃透Promise?先实现一个再说(包含所有方法)(一)
|
前端开发
62 # 借用 promise 写成类的方法
62 # 借用 promise 写成类的方法
32 0
|
前端开发
21 # 实现 promise 的 race 方法
21 # 实现 promise 的 race 方法
47 0
|
前端开发
20 # 实现 promise 的 all 方法
20 # 实现 promise 的 all 方法
50 0
|
前端开发
18 # promise 的 finally 方法实现原理
18 # promise 的 finally 方法实现原理
62 0
|
存储 前端开发
|
3天前
|
前端开发 索引
Promise.all() 方法的参数可以是什么类型?
综上所述,`Promise.all()` 方法的参数类型较为灵活,但无论使用哪种类型的可迭代对象作为参数,其核心的异步操作处理逻辑和成功失败的判断机制都是一致的,都是为了方便地处理多个异步操作的并发执行和结果汇总。
|
6天前
|
存储 前端开发
除了 Promise.all(),还有哪些方法可以处理异步并发操作?
在上述示例中,`concurrentPromises` 函数接受一个Promise数组和最大并发数作为参数,通过手动控制并发执行的Promise数量,实现了对异步操作的并发控制,并在所有Promise完成后返回结果数组。
|
3天前
|
前端开发
Promise.race() 方法在什么场景下使用?
`Promise.race()` 方法通过其独特的竞争机制,在需要快速获取结果、设置超时控制、实现快速失败以及根据条件动态选择异步操作等场景中,能够提供简洁有效的解决方案,帮助优化异步操作的执行流程和提高系统的响应性能。

热门文章

最新文章