9 # 实现链式调用里普通值处理

简介: 9 # 实现链式调用里普通值处理

普通值处理

下面需要实现 promise 的链式调用问题,目前先处理普通值的情况,如果返回的是普通的值的话:传递到下一次的成功中(不是错误也不是 promise 就是普通值)

// 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);
        }
    }
    // 1. promise 成功和失败的回调的返回值可以传递到外层的下一个 then
    // 2. promise 返回值情况
    //  2.1. 如果返回的是普通的值的话:传递到下一次的成功中(不是错误也不是 promise 就是普通值)
    //  2.2. 如果返回的是错误的情况:一定会走到下一次的失败中
    //  2.3. 如果返回的是 promise 的情况:会采用 promise 的状态,决定下一步是走成功还是失败
    // 3. 错误处理:如果离自己最近的 then 没有错误处理(没有写错误函数)会向下找
    // 4. 每次执行完 `promise.then` 方法后返回的都是一个新的 promise (promise 一旦成功或者失败都不能去修改状态)
    // promise 必须提供 then 方法来存取它当前或最终的值或者原因。
    // then 接收两个参数:onFulfilled 和 onRejected
    then(onFulfilled, onRejected) {
        // 实现链式调用
        let kaimoPromise = new KaimoPromise((resolve, reject) => {
            if (this.status === RESOLVE) {
                let x = onFulfilled(this.value);
                resolve(x);
            }
            if (this.status === REJECT) {
                onRejected(this.reason);
            }
            if (this.status === PENDING) {
                this.onResolveCallbacks.push(() => {
                    onFulfilled(this.value);
                });
                this.onRejectCallbacks.push(() => {
                    onRejected(this.reason);
                });
            }
        });
        return kaimoPromise;
    }
}
module.exports = KaimoPromise;

测试:

const KaimoPromise = require("./9/kaimo-promise.js");
// 调用 p1.resolve() => p1.then(data)
//      p2.resolve() => p2.then(data)
let p1 = new KaimoPromise((resolve, reject) => {
    resolve("kaimo666");
});
let p2 = p1.then((data) => {
    console.log("p1---resolve--->", data);
    return "kaimo777";
});
p2.then((data) => {
    console.log("p2---resolve--->", data);
});

目录
相关文章
|
9月前
嵌套调用和链式访问
嵌套调用和链式访问
63 0
|
9月前
|
存储 C语言
C 语言函数完全指南:创建、调用、参数传递、返回值解析
函数是一段代码块,只有在被调用时才会运行。 您可以将数据(称为参数)传递给函数。 函数用于执行某些操作,它们对于重用代码很重要:定义一次代码,并多次使用。
250 3
|
9月前
|
Python
函数嵌套调用
函数嵌套调用
83 1
|
6月前
|
Go 数据处理
深入理解函数返回多个值的机制
【8月更文挑战第31天】
28 0
|
9月前
|
算法 编译器 C语言
C learning_10 (函数的嵌套调用和链式访问、函数的声明和定义、函数递归)
C learning_10 (函数的嵌套调用和链式访问、函数的声明和定义、函数递归)
|
9月前
|
存储 搜索推荐 Python
函数的调用和返回值
函数的调用和返回值
|
9月前
|
定位技术 C++ Python
C++一个函数返回两个或更多个返回值的方法
C++一个函数返回两个或更多个返回值的方法
238 1
|
9月前
自定义封装一个方法让这个方法可以判断所有的数据类型并返回
自定义封装一个方法让这个方法可以判断所有的数据类型并返回
48 0
|
前端开发
8 # 链式调用
8 # 链式调用
53 0
|
存储 C语言 容器
调用一个函数时发生了什么?
调用一个函数时发生了什么?
171 0
调用一个函数时发生了什么?