zoukankan      html  css  js  c++  java
  • 10分钟,让你彻底明白Promise原理

    什么是Promise?本代码用定外卖来举例子,让你明白。

    // 定外卖就是一个Promise,Promist的意思就是承诺
    // 我们定完外卖,饭不会立即到我们手中
    // 这时候我们和商家就要达成一个承诺
    // 在未来,不管饭是做好了还是烧糊了,都会给我们一个答复

    function orderFood(){
    // Promise 接受两个参数
    // resolve: 异步事件成功时调用(菜烧好了)
    // reject: 异步事件失败时调用(菜烧糊了)
    return new Promise((resolve, reject) => {
    let result
    console.log('in promise')
    setTimeout(()=>{
    // 商家厨房做饭,模拟概率事件
    result = Math.random() > 0.5 ? '菜烧好了' : '菜烧糊了'
    // 下面商家给出承诺,不管烧没烧好,都会告诉你
    if (result == '菜烧好了'){
    // 商家给出了反馈
    resolve('我们的外卖正在给您派送了')
    }else{
    reject('不好意思,我们菜烧糊了,您再等一会')
    }
    }, 5000)
    })
    }

    // 你在家上饿了么定外卖
    // 有一半的概率会把你的饭烧糊了
    // 好在有承诺,他还是会告诉你

    // 菜烧好执行,返回'我们的外卖正在给您派送了'
    console.log('before order')
    orderFood().then(res => console.log(res))
    // 菜烧糊了执行,返回'不好意思,我们菜烧糊了,您再等一会'
    .catch(res => console.log(res))
    console.log('after order')

    为了让大家更容易理解,我们从一个场景开始讲解,让大家一步一步跟着思路思考,相信你一定会更容易看懂。

     

    考虑下面一种获取用户id的请求处理

     

    //例1
    function getUserId() {
        return new Promise(function(resolve) {
            //异步请求
            http.get(url, function(results) {
                resolve(results.id)
            })
        })
    }
    
    getUserId().then(function(id) {
        //一些处理
    })

     

    getUserId方法返回一个promise,可以通过它的then方法注册(注意注册这个词)在promise异步操作成功时执行的回调。这种执行方式,使得异步调用变得十分顺手。


    原理剖析

     

    那么类似这种功能的Promise怎么实现呢?其实按照上面一句话,实现一个最基础的雏形还是很easy的。

     

    极简promise雏形

     

    function Promise(fn) {
        var value = null,
            callbacks = [];  //callbacks为数组,因为可能同时有很多个回调
    
        this.then = function (onFulfilled) {
            callbacks.push(onFulfilled);
        };
    
        function resolve(value) {
            callbacks.forEach(function (callback) {
                callback(value);
            });
        }
    
        fn(resolve);
    }

     

    上述代码很简单,大致的逻辑是这样的:

     

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

     

    可以结合例1中的代码来看,首先new Promise时,传给promise的函数发送异步请求,接着调用promise对象的then属性,注册请求成功的回调函数,然后当异步请求发送成功时,调用resolve(results.id)方法, 该方法执行then方法注册的回调数组。

     

    相信仔细的人应该可以看出来,then方法应该能够链式调用,但是上面的最基础简单的版本显然无法支持链式调用。想让then方法支持链式调用,其实也是很简单的:

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

     

    see?只要简单一句话就可以实现类似下面的链式调用:

     

    // 例2
    getUserId().then(function (id) {
        // 一些处理
    }).then(function (id) {
        // 一些处理
    });

     


    加入延时机制

     

    细心的同学应该发现,上述代码可能还存在一个问题:如果在then方法注册回调之前,resolve函数就执行了,怎么办?比如promise内部的函数是同步函数:

     

    // 例3
    function getUserId() {
        return new Promise(function (resolve) {
            resolve(9876);
        });
    }
    getUserId().then(function (id) {
        // 一些处理
    });

     

    这显然是不允许的,Promises/A+规范明确要求回调需要通过异步方式执行,用以保证一致可靠的执行顺序。因此我们要加入一些处理,保证在resolve执行之前,then方法已经注册完所有的回调。我们可以这样改造下resolve函数:

     

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

     

    上述代码的思路也很简单,就是通过setTimeout机制,将resolve中执行回调的逻辑放置到JS任务队列末尾,以保证在resolve执行时,then方法的回调函数已经注册完成.

    总结

     

    刚开始看promise源码的时候总不能很好的理解then和resolve函数的运行机理,但是如果你静下心来,反过来根据执行promise时的逻辑来推演,就不难理解了。这里一定要注意的点是:promise里面的then函数仅仅是注册了后续需要执行的代码,真正的执行是在resolve方法里面执行的,理清了这层,再来分析源码会省力的多。

     

    现在回顾下Promise的实现过程,其主要使用了设计模式中的观察者模式:

     

    1. 通过Promise.prototype.then和Promise.prototype.catch方法将观察者方法注册到被观察者Promise对象中,同时返回一个新的Promise对象,以便可以链式调用。
    2. 被观察者管理内部pending、fulfilled和rejected的状态转变,同时通过构造函数中传递的resolve和reject方法以主动触发状态转变和通知观察者。
  • 相关阅读:
    FTP文件乱码和传输模式解释
    win7(x64)+VS2012+cocos2d-x环境的配置以及试运行
    XCode详解及iOSApp上传
    WP8教程
    Windows Phone 8 开发环境搭建
    Wp8开发环境搭建总结
    跟随玩家
    JniHelper 含安卓推送
    软硬结合第二篇——酷我音乐盒的逆天玩法
    IOS ITunesConnect 修改开发商名称
  • 原文地址:https://www.cnblogs.com/yzhihao/p/11475759.html
Copyright © 2011-2022 走看看