zoukankan      html  css  js  c++  java
  • promise源码解析

    前言

    大部分同学对promise,可能还停留在会使用es6的promise,还没有深入学习。我们都知道promise内部通过reslove、reject来判断执行哪个函数,原型上面的then同样的,也有成功回调函数跟失败回调函数。

    这篇文章,我们来讲讲promise的源码,从源码来分析,promise的原理。Tip:  阅读源码是枯燥的

    使用

    使用es6的promise常用的方式有两种:
    1、使用CDN 引入方式,我们在html中引入es6-promise.js
    es6-promise.auto.js这两个js文件,就可以使用了。
    2、通过node安装方式,有两种安装方式:
    yarn add es6-promise
    or
    npm install es6-promise

    安装完成后就可以使用了,比如:var Promise = require('es6-promise').Promise;

    Tip:
    如果要在Node或浏览器中通过CommonJS填充全局环境,请使用以下代码段:
    require('es6-promise').polyfill();
    require('es6-promise/auto');
    这里不会将结果分配polyfill ()给任何变量。该polyfill ()方法将Promise在调用时修补全局环境。


    分析
    声明Promise
    var Promise$1 = function () {
      function Promise(resolver) {
        this[PROMISE_ID] = nextId();
        this._result = this._state = undefined;
        this._subscribers = [];
    
        if (noop !== resolver) {
          typeof resolver !== 'function' && needsResolver();
          this instanceof Promise ? initializePromise(this, resolver) : needsNew();
        }
      }

    从代码上可以看出跟promise交互的主要方式是通过其`then`方法,它会记录回调用来接收promise的最终值或者promise无法履行的原因。

    我们来看看resolve方法:

    function resolve$1(object) {
      /*jshint validthis:true */
      var Constructor = this;
    
      if (object && typeof object === 'object' && object.constructor === Constructor) {
        return object;
      }
    
      var promise = new Constructor(noop);
      resolve(promise, object);
      return promise;
    }
    function resolve(promise, value) {
      // 首先一个Promise的resolce结果不能是自己 (自己返回自己然后等待自己,循环)
      if (promise === value) {
        reject(promise, selfFulfillment());
      } else if (objectOrFunction(value)) {
        // 当新的值存在,类型是对象或者函数的时候
        handleMaybeThenable(promise, value, getThen(value));
      } else {
        // 最终的结束流程,都是进入这个函数
        fulfill(promise, value);
      }
    }

    `Promise.resolve`会返回一个将被resolve的promise传递了“value”。 我们可以用下面的简写:

      let promise = Promise.resolve(1);
      promise.then(function(value){
        // value === 1
      });

    最后看下then方法:

    Promise.prototype.then = function (didFulfill, didReject) {
        if (debug.warnings() && arguments.length > 0 &&
            typeof didFulfill !== "function" &&
            typeof didReject !== "function") {
            var msg = ".then() only accepts functions but was passed: " +
                    util.classString(didFulfill);
            if (arguments.length > 1) {
                msg += ", " + util.classString(didReject);
            }
            this._warn(msg);
        }
        return this._then(didFulfill, didReject, undefined, undefined, undefined);
    };
    总结:
    promise执行步骤如下:
    1、 首先创建Promise
    2、 然后设置需要执行的函数
    3、 接着设置完成的回调
    4、 跟着开始执行函数
    5、 最后根据执行结果选择回调


  • 相关阅读:
    201521123100《Java程序设计》第八周学习总结
    201521123100 《Java程序设计》 第7周学习总结
    201521123100 《Java程序设计》第6周学习总结
    201521123100 《Java程序设计》第5周学习总结
    201521123100 《Java程序设计》第4周学习总结
    201521123100 《Java程序设计》第3周学习总结
    201521123093 java 第十一周学习总结
    201521123093 java 第十周学习总结
    201521123093 java 第九周学习总结
    201521123093 java 第八周总结
  • 原文地址:https://www.cnblogs.com/cczlovexw/p/10448767.html
Copyright © 2011-2022 走看看