从promise规范来手写promise

作者: 三多_250e | 来源:发表于2022-08-15 10:42 被阅读0次

promise的术语

promise 是一个有then方法的对象或者是函数，行为遵循本规范
thenable 是一个有then 方法的对象或者是函数
value是promise 状态成功时候的值，也就是resolve的参数，表示结果的数据
reason是promise 状态失败时候的值，也就是reject的参数，表示拒绝的原因
exception是一个使用throw抛出的异常值。

promise的使用

异步的逻辑

为什么有微任务？

调用栈并发量大的时候，微任务可以解决异步时机不可控的问题

典型的异步

事件回调
Ajax请求
Node API
setTimeout等

function foo() {
    setTimeout(() => {
        console.log("foo");
        //假如，把这个foo字符串看成一个复杂计算的结果
        fn("foo")
    }, 5000)
}
foo((res) => {
    console.log(`I've got ${res}`)
})

<script>代码块算宏任务嘛？

需要自己去理解下主线程，宏任务，微任务？其实面试单纯的问这个的话，有点转牛角尖，没必要。理解好宏任务，微任务，event loop就可以啦（个人感受）

第二个例子:

vue性能比react好，这个要看如何定义性能，在那些方面，是那些指标，一些指标下，react是优于vue的，框架间没有那么绝对。

回调地狱

fs.readFile('a.text','utf-8',function(err,data) {
    fs.readFile('b.text','utf-8',function(err,data) {
        fs.readFile('c.text','utf-8',function(err,data) {
        })
    })
})

promise的实现

初探 promise

const handler = (resolve, reject) =>{
    setTimeout(() => {
        resolve([3,4,5]);
        reject([1,2,3]);
    }, 1000)
}
function getSomeThing(url) {
    return new Promise(handler)
}
let promise1 = getSomeThing('/api/v1/user/role');
promise1.then((res) =< {
    console.log(`the result is ${res}`);
}, (error) => {
    console.log(`the reason is ${error}`);
})

通过上面的结构我们可以发现:

Promise 是一个构造函数；
Promise接收一个函数作为promise的参数，这个函数本身的参数有两个，resolve和reject ，同时要求这两个也是函数；
Promise返回的对象，包含一个then函数，then函数接收两个函数，这两个参数，一般也是函数；

我们在使用new关键字调用Promise构造函数时，在结束时候:

 如果正确执行，调用resolve方法，将结果放在resolve的参数中执行，这个结果可以在后面的then中的第一个函数参数（onFulfilled）中拿到；
 如果错误执行，调用reject方法，将错误信息放在reject的参数中执行，这个结果可以再后面的then的第二个参数(onRejected)中拿到；

上面的总结中的第四点是最重要的，同时也是我们在日常中最多用到的地方，如接口请求的结果处理，都是在then中，比如res是正确执行的结果，这个时候，我们的结果res就是当做参数放在了resolve函数中，这里一定要理解清楚，不然无法进行后续的手写promise相关；
接下来我们再进一步，对于promise的状态进行探究，promiseA+规范中规定有
[rule--]

promise的状态

pending

初始的状态，可改变
一个 promise 在 resolve / reject 前都处于这个状态
我们可以通过调用 resolve 方法或 reject 方法，让这个 promise , 变成 fulfilled/rejected 状态；

fulfilled

不可变状态
在 resolve 被调用之后，变成这个状态，并且拥有一个 value

rejected

不可变状态
在 reject 被调用之后，变成这个状态，并拥有一个 reason

在有了状态之后，我们需要来了解一下

then函数

参数：
onFulfilled 必须是函数类型，如果不是，应该被忽略；
onRejected 必须是函数类型，如果不是，应该被忽略；
onFulfilled / onRejected 的特性

在promise变成 fulfilled / rejected 状态的时候，应该调用 onFulfilled / onRejected;
在promise变成 fulfilled / rejected 状态之前，onFulfilled / onRejected不应该切无法被调用;
由于promise状态一旦改变，就不再可以改变，那代表着 onFulfilled / onRejected 只能被调用一次；
[--rule]
这时，我们基于以上规则或者这限制条件，先写一个L0版本的promise

function L0Promise(execute) {
    this.status = 'pending' // promise的初始状态
    this.value = null; //用来存放resolve之后拥有的值
    this.reason = null; //用来存放后续reject的error信息
    //接下来需要定义两个函数,resolve/reject 他们可以让promise从pending变为fulfilled或者rejected状态；
    const resolve = (value) => {
        // 需要判断控制正确的状态流向是 pending => fulfilled
        if(this.status === 'pending') {
            this.value = value;
            this.status = 'fulfilled'
        }
    };
    const reject = (reason) => {
        // 需要判断控制正确的状态流向是 pending => rejected
        if(this.status === 'pending') {
            this.reason = reason;
            this.status = 'rejected'
        }
    };
    execute(resolve, reject);
}
// 注意上面我们只是完成了部分promise的工作，对于then，需要从原型链上定义
L0Promise.prototype.then = function(onfulfilled,onrejected) {
    //这里为啥要做这个就是对应我们要对他两类型做校验,必须是函数
    onfulfilled = typeof onfulfilled === 'function' 
        ? onfulfilled : data => data;
    onrejected = typeof onrejected === 'function' 
        ? onrejected : error => {throw error};
    // 对应promise的status变之前，不该且无法被调用，
    if(this.status === 'fulfilled) {
        onfulfilled(this.value);
    }
    if(this.status === 'rejected) {
        onfulfilled(this.reason);
    }
}

其实对于以上第一个版本，对照promiseA+规范很容易写完，但是问题来了，这里的部门你可以发现是没有异步的，又或者说，我们写一个特殊的例子来试一下

let promise = new L0Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('data')
    }, 1000) 
})
promise.then((data) => {
    console.log(data)
})

当把这段代码运行的时候你会发现不生效了，这里的问题在于，当我resolve执行的时候，他是异步的，一秒后才执行，可是这个时候，onfulfilled函数已经执行过了，这就和我们的规范当中说法冲突了，那说明我们的代码中有漏洞，需要一个机制去控制resolve和onfulfilled执行顺序，必须得等resolve执行完成后，通知onfulfilled去执行所以我们这里应该用发布订阅模式，onfulfilled订阅resolve，当resolve完成后，发布给订阅他的onfulfilled，同时规范中定义onfulfilled和onrejected 应该是微任务，我们这里暂时用setTimeout代替，ok，那我们来对L0进行完善

function L1Promise(execute) {
    this.status = 'pending';
    this.value = null;
    this.reason = null;
    // 思考一下，这两个数组的作用有哪些？
    this.onFulfilledArray = [];
    this.onRejectedArray = [];
   
    const resolve = (value) => {
        setTimeout(() => {
            if(this.status === 'pending') {
                this.value = value;
                this.status = 'fulfilled';
                this.onFulfilledArray.forEach(func => func(value));
            }
        })
    };

    const reject = (reason) => {
        setTimeout(() => {
            if(this.status === 'pending') {
                this.reason = reason;
                this.status = 'rejected';
                this.onRejectedArray.forEach(func => func(value));
            }
        })
    };

    execute(resolve, reject);
};
L1Promise.prototype.then = function(onfulfilled, onrejected) {
    onfulfilled = typeof onfulfilled === 'function' 
        ? onfulfilled : data => data;
    onrejected = typeof onrejected === 'function' 
        ? onrejected : error => {throw error};
    if(this.status === 'fulfilled') {
        onfulfilled(this.value);
    }
    if(this.status === 'rejected') {
        onrejected(this.reason);
    }
    // 这里为啥要pending状态做处理，then里面正常不是只有对结果的执行嘛？
    if(this.status === 'pending') {
        //两个数组存放的状态作用在我们完善中其实有两个作用，其中一个是上面提到的发布订阅
        this.onFulfilledArray.push(onfulfilled);
        this.onRejectedArray.push(onrejected);
    }
};

请一定要过一遍当中的细节，尤其是then里面对pending的处理，用的数组存放，这里其实是有一个promise.then().then() 的考虑以及同时两个promise.then() ,promise.then()，我们需要保证他们按照then的注册顺序执行，
ok在保证注册顺序执行then函数的情况下，那我们接下来来到了promise的核心，链式调用，对应上面的第一个回调地狱

//我们可以分别执行以下如下代码：
let promise = new Promise((resolve, reject) => {
    // T1
    setTimeout(() => {
        resolve('hello');
    }, 1000)
});
// T0 + 0.0000001s
promise.then((data) => {
    console.log(data);
    return data + 'sanduo';
})
.then(data => {
    console.log(data);
});
let promise1 = new L1Promise((resolve, reject) => {
    // T1
    setTimeout(() => {
        resolve('hello');
    }, 1000)
});
// T0 + 0.0000001s
promise1.then((data) => {
    console.log(data);
    return data + ' sanduo';
})
.then(data => {
    console.log(data);
})

ok,我们可以发现，promise可以，自己手写的L1Promise不行，这就是因为我们没有在第一次then函数的返回值中进行返回，也没有考虑then方法可以被多次调用，这里又引出另外一条promiseA+规范，
【rule--】
then应该返回一个promise
onFulfilled / onRejected 执行的结果为x，调用resolvePromise；
如果 onFulfilled / onRejected 执行时抛出异常，promise2需要调用reject；
如果 onFulfilled / onRejected 不是一个函数，则按照之前的他们会被忽略，然后promise2以promise1 的value/reason 触发fulfilled / rejected
【--rule】
根据以上内容，我们需要再次对L1Promise进行完善，使其支持链式调用；

// let promise2 = promise.then(onFulfilled,onRejected);
function L2Promise(execute) {
    this.status = 'pending';
    this.value = null;
    this.reason = null;
    this.onFulfilledArray = [];
    this.onRejectedArray = [];
   
    const resolve = (value) => {
        setTimeout(() => {
            if(this.status === 'pending') {
                this.value = value;
                this.status = 'fulfilled';
                this.onFulfilledArray.forEach(func => func(value));
            }
        })
    };

    const reject = (reason) => {
        setTimeout(() => {
            if(this.status === 'pending') {
                this.reason = reason;
                this.status = 'rejected';
                this.onRejectedArray.forEach(func => func(value));
            }
        })
    };
    //  try catch
    execute(resolve, reject);
};

L2Promise.prototype.then = function(onfulfilled, onrejected) {
    onfulfilled = typeof onfulfilled === 'function' 
        ? onfulfilled : data => data;
    onrejected = typeof onrejected === 'function' 
        ? onrejected : error => {throw error};

    let promise2; // 作为 then 函数的返回值。
    if(this.status === 'fulfilled') {
        //这里可以看到，return的是一个新的promise，下面的rejected状态一样的
        return promise2 = new L2Promise((resolve, reject) => {
            setTimeout(() => {
                try {
                    let result = onfulfilled(this.value);
                    resolve(result);
                } catch(e) {
                    reject(e);
                }
            })
        })
    }
    if(this.status === 'rejected') {
        return promise2 = new L2Promise((resolve, reject) => {
            setTimeout(() => {
                try {
                    let result = onrejected(this.reason);
                    resolve(result);
                } catch(e) {
                    reject(e);
                }
            })
        })
        
    }
    if(this.status === 'pending') {
        return promise2 = new L2Promise((resolve, reject) => {
            this.onFulfilledArray.push(() => {
                try {
                    let result = onfulfilled(this.value);
                    resolve(result);
                }
                catch(e) {
                    reject(e);
                }
            })

            this.onRejectedArray.push(() => {
                try {
                    let result = onrejected(this.reason);
                    resolve(result);
                }
                catch(e) {
                    reject(e);
                }
            })
        })
    }
};

可以看出上面的demo，我把完善的地方都加了注释，这样的一个promise就一个完成大半了，还有一个resolvePromise，但是我觉得能了解或者手写到链式调用这一步，我觉得已经可以给面试官一个比较好的答卷了，
最后我们提一下resolvePromise的规范

resolvePromise(promise2, x, resolve, reject)

[rule--]

resolvePromise 的规范

如果 promise2 和 x 相等，那么 reject TypeError
如果 x 是一个 promise
如果 x 是 pending 态，那么 promise 必须要在 pending ,直到 x 变成 fulfilled or rejected.
如果 x 被 fulfilled, fulfill promise with the same value.
如果 x 被 rejected, reject promise with the same reason.
如果 x 是一个 object 或者是一个 function
let then = x.then.
如果 x.then 这步出错，那么 reject promise with e as the reason.
如果 then 是一个函数，then.call(x, resolvePromiseFn, rejectPromise)
resolvePromiseFn 的入参是 y, 执行 resolvePromise(promise2, y, resolve, reject);
rejectPromise 的入参是 r, reject promise with r.
如果 resolvePromise 和 rejectPromise 都调用了，那么第一个调用优先，后面的调用忽略。
如果调用then抛出异常e
如果 resolvePromise 或 rejectPromise 已经被调用，那么忽略
则，reject promise with e as the reason
如果 then 不是一个function. fulfill promise with x.
[--rule]

从promise规范来手写promise

promise的术语

promise的使用

异步的逻辑

为什么有微任务？

典型的异步

<script>代码块算宏任务嘛？

第二个例子:

回调地狱

promise的实现

初探 promise

promise的状态

then函数

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读