Promise原理及手写Promise

浅浅的花香味﹌ 2022-05-28 01:55 254阅读 0赞

# 原理： #

> Promise 原理围绕以下三个问题进行解决：
> 
> （有任何一步不了解的话请先往下看手写Promise，会一步步剖析原理，看完后再继续回顾这里！！）
> 
>  
> 
> 1. 怎么实现异步？
> 
> Promise内部then函数注册（注意：不是执行）后续需要执行的函数，resolve函数执行。需要保证函数在执行前都已注册好，
> 
> 所以resolve内部执行函数的代码需要加入延时机制setTimeout(0)放在任务队列的末尾
> 
> **问题：如果`Promise`异步操作已经成功，这时，在异步操作成功之前注册的回调都会执行，但是在`Promise`异步操作成功这之后调用的`then`注册的回调就再也不会执行了=>**
> 
>  
> 
> 2. 怎么实现在`Promise`异步操作成功这之后调用的`then`注册的回调也会执行？
> 
> 加入状态机制，若为pending，则将函数注册，等待后续resolve调用。若为fulfilled，则立即执行。resolve函数，将状态设为fulfilled
> 
>  
> 
> 3. 怎么实现链式调用？
> 
> 若是检测到resolve函数的参数newValue是一个promise对象（有then函数的对象），就使用对象冒充，
> 
> 调用它的then函数（下一个函数newValue,和它的resolve）

# **手写Promise** #

## 1. 极简promise雏形 ##

1.  调用`then`方法，将想要在`Promise`异步操作成功时执行的回调放入`callbacks`队列，其实也就是注册回调函数，可以向观察者模式方向思考；
2.  创建`Promise`实例时传入的函数会被赋予一个函数类型的参数，即`resolve`，它接收一个参数value，代表异步操作返回的结果，当一步操作执行成功后，用户会调用`resolve`方法，这时候其实真正执行的操作是将`callbacks`队列中的回调一一执行；

# #

## 2. 加入延时机制 ##

需要保证函数在执行前都已注册好，

实现：通过`setTimeout`机制，将`resolve`中执行回调的逻辑放置到`JS`任务队列末尾，以保证在`resolve`执行时，`then`方法的回调函数已经注册完成.（若不清楚为什么能放在js任务队列末尾，请查看[js事件循环机制][js]）

=》 改造resolve函数

function resolve(value) {
        setTimeout(function() {
            callbacks.forEach(function (callback) {
                callback(value);
            });
        }, 0)
    }

## 3. 加入状态机制 ##

它总共有三种状态：pending（默认。等待状） fulfilled（成功状） rejected（失败状）

状态一旦改变，就不会改变

then函数中，若为pending，则将函数注册，等待后续resolve调用。若为fulfilled，则立即执行。resolve函数，将状态设为fulfilled

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW56ZXplMDcwNw_size_16_color_FFFFFF_t_70][]

## 4. 实现链式Promise ##

> 所谓的链式`Promise：`
> 
> 链式`Promise`是指在当前`promise`达到`fulfilled`状态后，即开始进行下一个`promise`（后邻`promise`）。那么我们如何衔接当前`promise`和后邻`promise`呢？（这是这里的难点）。
> 
> => 实现：在`then`方法里面`return`一个`promise`就好啦。传递then方法生成的新promise的resolve方法，resolve（后邻`promise），在resolve中`，检测到参数是一个promise对象（有then函数的对象），就使用对象冒充，将改变后邻promise的resolve指向当前resolve（即将resolve传到后邻promise的then，并直接返回）

比如：来分析一个例子

getUserId()
        .then(getUserJobById)
        .then(function (job) {
            // 对job的处理
        });
    
    function getUserJobById(id) {
        return new Promise(function (resolve) {
            http.get(baseUrl + id, function(job) {
                resolve(job);
            });
        });
    }

`1. then`方法中，创建并返回了新的`Promise`实例，这是串行`Promise`的基础，并且支持链式调用。

`2. handle`方法是`promise`内部的方法。`then`方法传入的形参`onFulfilled`以及创建新`Promise`实例时传入的`resolve`均被`push`到当前`promise`的`callbacks`队列中，这是衔接当前`promise`和后邻`promise`的关键所在（这里一定要好好的分析下handle的作用）。

`3. getUserId`生成的`promise`（简称`getUserId promise`）异步操作成功，执行其内部方法`resolve`，传入的参数正是异步操作的结果`id`

4. 调用`handle`方法处理`callbacks`队列中的回调：`getUserJobById`方法，生成新的`promise`（`getUserJobById promise`）

5. 执行之前由`getUserId promise`的`then`方法生成的新`promise`(称为`bridge promise`)的`resolve`方法，传入参数为`getUserJobById promise`。这种情况下，会将该`resolve`方法传入`getUserJobById promise`的`then`方法中，并直接返回。

6. 在`getUserJobById promise`异步操作成功时，执行其`callbacks`中的回调：`getUserId bridge promise`中的`resolve`方法

7. 最后执行`getUserId bridge promise`的后邻`promise`的`callbacks`中的回调。

## 5.加入错误处理 ##

# **结束** #

如果文章对你有帮助，麻烦点赞哦！一起走码农花路~

![20190510130531760.jpg][]

[js]: https://blog.csdn.net/chenzeze0707/article/details/72588011
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW56ZXplMDcwNw_size_16_color_FFFFFF_t_70]: /images/20220528/4023c80634f94071b8a48c5caf4e0678.png
[20190510130531760.jpg]: /images/20220528/f7433aef27b94845ad0a163a4d076dc1.png