浅谈promise对象的工作原理

最新推荐文章于 2023-04-13 13:45:51 发布

机智的赵先生

最新推荐文章于 2023-04-13 13:45:51 发布

阅读量1k

点赞数 1

分类专栏： js 文章标签： js promise promise工作原理

本文链接：https://blog.csdn.net/badmoonc/article/details/80366714

版权

js 专栏收录该内容

22 篇文章 2 订阅

订阅专栏

promise对象的目的是为了解决js异步回调嵌套而使我们的代码难以维护和可读性差的问题，从本质上来说，promise只是通过某些技巧，实现了链式调用回调函数(.then)。（阅读此文章，默认您有一定的js基础，对js事件循环，promise的简单用法，任务队列有所了解）

首先我们先来看一段代码，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    

    <script src="https://cdn.bootcss.com/jquery/3.3.0/jquery.min.js"></script>
    <script>
        function getData(){
            return new Promise(function(reslove,reject){
                $.post('http://result.eolinker.com/iPu4V1g5cfb3a7e3e423185dcd6b16cb5756f0351c19494?uri=www.eolinker.com/api/demo',{},function(res){
                    reslove(res);
                },'JSON');
            })
        }
        getData().then(function(res){
            console.log(res);
        })
    </script>
</body>
</html>

这段代码是promise的一个简单用法，我们可以看到，在$.post的回调函数中调用了promise的resolve方法，并将回调结果res当作resolve的参数传进去，之后我们就可以在下边使用then方法这种链式调用的方式来处理回调函数了。那么对于这个执行过程是怎样的，promise是如何做到的呢，我们继续往下看

现在我们简单的模拟下promise函数

function PromiseEctype(fn) {
            var value = null,
                callbacks = [];  //callbacks为数组，因为可能同时有很多个回调

            this.then = function (onFulfilled) {    // A
                callbacks.push(onFulfilled);
            };

            function resolve(value) {       //B
                setTimeout(function(){//防止在then执行之前执行   
                    callbacks.forEach(function (callback) {        //C
                        callback(value);
                    });
                },0)
            }
            fn(resolve);        //D
        }
        //现在我们就可以用PromiseEctype了
        function getData() {    //E
            return new PromiseEctype(function (reslove) {
                $.post('http://result.eolinker.com/iPu4V1g5cfb3a7e3e423185dcd6b16cb5756f0351c19494?uri=www.eolinker.com/api/demo', {}, function (res) {
                    reslove(res);    
                }, 'JSON');
            })
        }
        getData().then(function (res) {
            console.log(res);
        });

好了现在一个简单的promise对象就被我们写好了，你可以把上边的这段代码copy到你的编辑器中执行一下，看下结果是否如此。

那么，现在我们来看看，这个PromiseEctype函数都做了什么。

1、首先创建了value变量，和一个callbacks数组（模拟队列，下文中我们就叫他执行队列，来存放我们写在then中的函数）

2、接着声明了一个then方法，then的作用就是将我们的函数放入执行队列（注意，只是放入执行队列但并未执行）

3、紧跟着声明resolve函数（但未执行），resolve主要作用就是拿到我们第二步执行队列中存放的函数。（使用setTimeout的原因是为了确保callbacks.forEach(function(callback){callback(value)})这段代码会在.then之后执行，从而保证函数执行顺序，关于为什么setTimeout可以做到这样，详见js事件循环(event loop）

4、最后执行fn(resolve)，也就是执行到了我们发送请求的这一步，js发现异步请求会将函数放入事件队列。至此，所有同步带吗知心完毕，浏览器主线程空闲，紧接着开始进入事件队列执行我们的异步请求函数，异步执行完毕后，在回调中执行了resolve函数，并将结果传给了resolve，此时我们已经拿到了

5、最后resolve执行，从这一步我们才执行我们第二步then函数放入执行队列的代码。

6、所有代码执行完毕。控制台输出我们的请求结果。

执行顺序：E-->A-->D-->B-->C

本地代码部分引自三十分钟，让你彻底明白promise原理

如有疑问或描述不当之处，请在文章下方留言。

另外建议把整个过程用debug看几遍。