Promise - （一）初识

末蓝、 2023-10-02 09:43 31阅读 0赞

**目录**

JS异步原理

主线程（main-thread）和执行栈(call-stack)

同步任务和异步任务

回调函数

任务队列（task queue）和事件循环(event loop)

传统JS异步实现

异步任务之间的同步执行实现，即前一个异步任务完成后，才能执行后一个异步任务

传统的JS异步任务间的同步执行实现的缺陷

Promise对异步任务的封装

Promise简介

Promise实现异步任务和其回调函数的解耦

Promise实现异步任务间串行执行，即异步任务间的同步执行

Promise的其他特性

1、Promise对象的状态只能修改一次，即只能从pending-》fulfilled或pending-》rejected

2、一个Promise对象可以调用多次then方法，且后面的不会覆盖前面的

3、当我们指定的executor函数，回调函数出现异常时，我们应该做容错机制，此时应该产生一个状态为rejected，结果为异常信息的Promise对象

--------------------

# JS异步原理 #

## 主线程（main-thread）和执行栈(call-stack) ##

JS是单线程的，即所有JS代码都由一个线程执行，这个线程就是JS的主线程。

JS的主线程在执行JS代码时，需要保存执行过程中的数据，而这些数据就保存在执行栈中，更准确的说，JS的主线程在执行代码中的函数时，就会在执行栈中生成一个栈帧，栈帧中保存着函数中的使用的数据。

# 同步任务和异步任务 #

由于JS是单线程执行的，所以在遇到耗时且不依赖于JS线程的操作时，会发生无意义的阻塞。

为什么叫无意义的阻塞呢？举个例子：

1、JS使用setTimeout设置1分钟的等待

2、JS使用for循环，循环十万次

两者均会造成一个阻塞时间段，但是setTimeout的1分钟等待不是JS实现的，而是计时器模块实现的。而for循环十万次，这个是JS实现的。

即：setTimeout的1分钟等待过程, 不是JS的单线程执行的结果，而for循环十万次造成的等待，是JS的单线程执行结果。

也就是说setTimeout的1分钟等待过程，JS的单线程是空闲的。

所以为了充分利用JS的单线程，JS会将耗时且不依赖于JS线程的操作挂起，交给其他模块先处理，JS优先执行依赖于JS线程的操作。

我们将 “耗时且不依赖于JS线程的操作” 称为异步任务，将 “依赖于JS线程的操作” 称为同步任务。

但是异步任务中通常会嵌入JS代码去处理其他模块的响应结果，或者等待其他模块操作完成，执行被嵌入的JS的代码。

在JS中这段嵌入到异步任务中的JS代码就是“回调函数”

## 回调函数 ##

回调函数，故名思意就是：在某个操作定义时指定的，在该操作完成后才调用的函数。

回调函数不是立即执行的，而是必须等待定义它的任务完成后，才会被（任务）调用执行。

常见的回调函数有：

> setTimeout(回调函数，等待时间)
> 
> element.addEventListener(事件类型，回调函数)
> 
> fs.readFile(文件路径，编码格式，回调函数)
> 
> http.on(‘request’, 回调函数)

虽然回调函数是JS实现的，但是它被异步任务限制了执行时机，所以也被看出异步任务的组成部分。

## 任务队列（task queue）和事件循环(event loop) ##

从前面我们已经知道，JS主线程执行js代码过程中，会将js代码分为两类：同步任务和异步任务

其中同步任务会被主线程优先执行，即同步任务会优先进入执行栈。而异步任务必须等到所有同步任务出栈后，才能考虑被入栈执行。

那么异步任务在没有入执行栈前，会在哪里呢？

主线程执行代码，遇到异步任务（setTimeout），就会将异步任务（setTimeout）交给其他模块(Timer)处理，其他模块(Timer)拿到异步任务（setTimeout）后，先执行自己的操作（计时），当自己的操作执行完成后，会将 “回调函数” 推入JS的任务队列（task Queue），任务队列保证了入队的回调函数先进先出。

进入任务队列的异步任务的回调函数不会立即被主线程捞取执行，主线程还是会优先执行在执行栈中的同步任务，当执行栈中的同步任务处理完后，主线程才会去任务队列中捞取异步任务的回调函数，让其入执行栈，并被执行，当执行栈又空了，主线程会再次去任务队列中捞取，如此循环往复，我们把这种现象称为事件循环（event loop）。

所以任务队列和事件循环才是JS异步的灵魂。

# 传统JS异步实现 #

通过上面对于异步原理的解析，我们已经可以知道JS的异步任务的本质就是 先调用其他模块来处理JS搞不定的操作，然后通过JS回调函数来进行后续处理。

所以传统JS异步实现的关键还是调用其他模块，而回调函数只是被迫异步执行的JS代码而已，所以回调函数不是JS异步的实现本质。

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16][]

那么我们可以说传统的JS异步实现只能依赖于JS已提供的异步方法，如

> setTimeout(回调函数，等待时间)
> 
> element.addEventListener(事件类型，回调函数)

我们当前还没有能力自己实现异步。

## 异步任务之间的同步执行实现，即前一个异步任务完成后，才能执行后一个异步任务 ##

有一个需求，我需要在1s后打印a，打印完a后2s，打印b，打印完b后3s，打印c

如果是这样实现，就不符合要求![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

假设开始时是0s,然后

主线程执行第一个setTimeout函数，发现是异步任务a，则交给对于Timer模块，Timer模块开始给异步任务a计时，

主线程好不耽搁的继续执行第二个setTimeout函数，返现是异步任务b，则交给对于Timer模块，Timer模块开始给异步任务b计时，此时Timer模块给a,b计时的差距几乎为0

主线程好不耽搁的继续执行第三个setTimeout函数，返现是异步任务c，则交给对于Timer模块，Timer模块开始给异步任务c计时，此时Timer模块给a,b,c计时的差距几乎为0

就这样异步任务a,b,c好像在同一个时刻开始计时，最终之间间隔只有1s

所以最终实现应该采取异步任务的回调函数中嵌套异步任务的形式

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 2][]

这种情况就像是，异步任务也像同步任务一样执行，即前一个异步任务执行完，后一个异步任务才能执行

# 传统的JS异步任务间的同步执行实现的缺陷 #

上面只有a,b,c三个输出，如果继续输出c后4s后输出d，输出d后5秒后输出e，....，一直输出y后n秒后输出z结束，你就会发现一个可怕的嵌套层级

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 3][]

是不是感觉眼睛已经花了，层级嵌套已经不明朗了，代码修改已经举步维艰了。

那么ES6的Promise你值得拥有。

# Promise对异步任务的封装 #

Promise其实并不是提供新的异步实现，而是对已有的JS异步实现的缺陷做出解决。

传统的JS的异步任务是：通过嵌套来实现异步任务间的同步执行

造成的问题是：回调地狱

Promise可以把异步任务间的同步执行变得像 同步任务间的同步执行一样清晰明朗。

我们理解的同步任务间的同步执行，比如下面

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 4][]

那么如何将异步任务的同步执行变得像同步任务一样优雅呢？

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 5][]

如果拘泥于原来的异步实现肯定是不行了，就行上面这样，保证了异步任务间不嵌套，就无法实现异步任务间的同步执行，但是我们又不能推翻setTimeout,重新开发一个。

那么是什么造成了异步任务必须嵌套才能实现同步执行呢？

是异步任务的回调函数，如果能将异步任务的回调函数抽取出来

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 6][]

虽然没有了回调地狱的恐怖层级嵌套，但是这种割裂的关系，同样让人感觉不好

那么简单的修改已经不能满足要求了，只能依靠对异步任务的二次封装了。

## Promise简介 ##

Promise是一个构造函数，它主要用来封装异步任务，实现异步任务和其回调函数的解耦。即异步任务的回调函数不再被限制定义在异步任务的代码中。

## Promise实现异步任务和其回调函数的解耦 ##

异步任务被封装进executor函数中，而executor函数是Promise构造函数的入参

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 7][]

这样封装的好处是将异步任务的触发权交给了Promise对象，即Promise对象控制异步任务的执行，当前Promise构造函数设计是只要一new，就会调用executor，接着就会调用异步任务代码

为了加强控制，我们不希望一实例化Promise对象就调用executor()，进而导致异步任务执行，所以我们将创建Promise对象的动作封装为函数，只有调用函数时，才new Promise

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 8][]

由于异步任务被封装进了Promise对象中，所以Promise对象需要记录异步任务的执行结果，我们知道任务的执行结果不是成功就是失败，所以我们给Promise对象添加一个属性promiseState来记录异步任务的执行结果

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 9][]

因为当异步任务没有执行时，也应该有个状态，所以在异步任务成功失败结果外，应该还要有一个“未执行”情况的初始状态。

那么接下来我们如何设置异步任务的执行结果到Promise对象中呢？

我们知道只要创建Promise对象，就会触发executor函数调用，executor函数调用就会触发异步任务执行，异步任务执行结束，就会产生结果。所以我们可以在异步任务代码中加入Promise对象状态修改的操作

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 10][]

我们可以看出来executor的调用者其实是window（浏览器环境），所以无法在executor中获取到Promise对象的this，也就无法获取对象属性promiseState。

所以只能在Promise构造函数中提供函数修改promiseState属性，然后将函数的调用权交给executor

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 11][]

如上，我们给Promise构造函数增加了两个函数成员，resolve和reject函数，他们分别表示将promiseState属性改为成功fulfilled，和失败rejected。

并且Promise构造函数将resolve和reject函数的调用权交给了executor函数。

这样的话，executor中执行了异步任务，得到异步任务执行结果后，就可以根据结果是成功还是失败来决定调用resolve还是reject函数了。为了更好地表述异步任务执行结果，我们还需要给Promise对象添加一个描述性属性promiseResult。

举个例子：

下面代码封装了一个setTimeout异步任务到executor中，如果setTimeout正常运行，表示异步任务成功，调用resolve()，如果setTimeout发生异常，表示异步任务失败，调用reject()

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 12][]

Promise的根本任务是实现异步任务和其回调函数的解耦，到目前为止，还没有实现此能力。

要想实现异步任务和回调函数的解耦，即需要将回调函数的调用权从异步任务手中夺走，交给Promise对象。

那么如何抢走异步任务的回调函数调用权呢?

答案是抢不走！因为传统的JS异步任务就是几个固定的函数，如setTimeout，它的格式已经固化了，没有办法强行分离出回调函数。

既然抢不走回调函数调用权，那么就釜底抽薪，将回调函数的代码掏空，就给异步任务留一个空壳子回调函数。而回调函数的内在代码全部移到其他地方定义。

我们知道回调函数的执行时机是在异步操作完成后，就算现在回调函数和异步任务解耦了，这个特性也不能变，这是回调函数的存在意义。

那么Promise对象如何判断异步操作已经执行完了呢？

我们之前给Promise对象定义了promiseState属性，当异步任务完成，该属性的值就会从pending变为fulfilled或rejected。所以我们只要判断promiseState!=='pending'就可以知道异步操作是否完成了。

由于异步操作可能成功，也可能失败，所以我们的回调函数也应该是兼容处理，既要处理成功，也要处理失败。

这里设计了then方法，then方法的形参是两个函数，更准确地说是从异步任务中解耦出来的回调函数，一个是异步任务成功的回调函数，一个是异步任务失败的回调函数

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 13][]

这里给每个Promise对象提供了一个then方法，这个then方法可以获取到调用者“Promise对象”的promiseState属性，从而判断异步操作成功还是失败，如果成功了，就调用onResolve回调函数，如果失败了就调用onReject回调函数。

注意then方法的onResolve和onReject才是异步任务的回调函数，前面executor函数的resolve,reject只是用来改变Promise对象的promiseState状态的。

这里的回调函数onResolve和onReject的定义取决于Promise对象的then方法定义，不再依赖于异步任务，从而真正实现了回调函数和异步任务的解耦。

下面代码调用了then方法

function Promise(executor){
    	this.promiseState = 'pending'
    	this.promiseResult = null
    	
    	let that = this
    	function resolve(data) {
    		that.promiseState = 'fulfilled'
    		that.promiseResult = data
    	}
    	
    	function reject(data) {
    		that.promiseState = 'rejected'
    		that.promiseResult = data
    	}
    	
    	executor(resolve,reject)
    }
    
    Promise.prototype.then = function(onResolve, onReject){
    	if(this.promiseState === 'fulfilled') {
    		onResolve()
    	} else if(this.promiseState === 'rejected') {
    		onReject()
    	} else {
    		
    	}
    }
    
    function p() {
    	return new Promise(
    		function(resolve,reject){
    			try {
    				setTimeout(function(){
    					resolve('OK')
    				},1000)
    			} catch(e) {
    				reject('NOK')
    			}
    			
    		}
    	)
    }
    
    p().then(function(value){
    	console.log(value)
    },function(reason){
    	console.log(reason)
    })

但是我们发现一个问题:

p（）调用 =》

new Promise(executor)，产生Promise对象 =》

executor执行 =》

异步任务setTimeout执行 =》

setTimeout是异步任务，会被挂起，JS主线程继续执行同步代码 =》

then方法被调用 =》

then方法中this.promiseState值为pending,因为setTimeout是异步任务还没有执行，导致resolve()没有调用，导致this.promiseState未被改变

被解耦的回调函数代码的执行，依赖于Promise对象的状态是完成态，

而Promise对象的状态完成依赖于异步任务的完成，

而异步任务的完成依赖于同步代码的结束，

而同步代码的结束依赖于被解耦的回调函数代码的执行。

死循环了。

未必，我们只要让上面流程中的一环闭环就行了，“被解耦的回调函数代码的执行”，这里我们不能强制要求回调函数的代码执行，因为理论上来说，回调函数的代码一定要在异步任务完成后执行。所以既然异步任务在等这里的同步代码结束，那我们就把回调函数的代码再还回去。

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 14][]

当Promise对象调用then方法，发现this.promiseState为pending时，表示封装的任务一定是异步任务，那么我们就把回调函数再还回去，等待异步任务结束执行。

因为异步任务一定会去调用resolve或reject方法修改this.promiseState，所以我们可以在resolve或reject中执行还回去的回调函数。

至此我们就完成了Promise的异步封装，实现了异步任务和回调函数的解耦。

# Promise实现异步任务间串行执行，即异步任务间的同步执行 #

传统的JS异步任务，必须要通过回调函数嵌套异步任务，才能实现异步任务之间串行执行。当嵌套层级过深，就会形成回调地狱，导致代码结构臃肿，不易改动。

Promise的出现，让异步任务和其回调函数解耦，回调函数不用定义在异步任务原有框架中，可以在异步任务框架定义。这就从结构上杜绝了回调地狱的可能。

在逻辑上：

当前被解耦的回调函数是随着Promise.prototype.then调用而被传递给改变Promise状态的方法resolve和reject，异步任务的执行触发了resolve和reject的调用，而resolve和reject的调用触发了被解耦的回调函数的调用。

所以可以简单理解为：随着then方法的调用，被解耦的回调函数也被调用了

即我们想要执行异步任务的回调函数，就调用then方法。而then方法本身是同步任务。

那么如果有多个被Promise封装的异步任务，是不是可以通过分别调用then方法来实现串行执行呢？

答案是不行的，因为then方法虽然是同步的，但是then方法的参数，即解耦的回调函数的执行不是then方法触发的（这里指异步情况，如果Promise封装的是同步任务，那这里回调函数就是then方法触发），then方法只负责将回调函数保存到Promise对象的callback属性中，当异步操作完成，异步任务就会调用resolve方法或reject方法，后面resove或reject方法会负责调用回调函数。

即：真正触发异步解耦的回调函数的调用的还是异步操作的完成。

那么如何保证then方法中的回调函数执行完，才继续执行下个同步任务呢？

Promise对then方法做了如下设计：

> then方法可以返回一个新的Promise对象，可以用来作为异步任务串行调用过程中下次then的调用者。
> 
> 即：下一次then的调用者是上一次then的返回值，而then的返回值又取决于其形参回调函数的返回值。
> 
> 这样就形成了一个依赖关系：
> 
> 下次then的调用的调用者，依赖于上次then的返回值，
> 
> 上次then的返回值，依赖于本身形参(回调函数)的返回值
> 
> 回调函数的返回值，依赖于resolve或reject函数的执行
> 
> resolve或reject函数的执行，依赖于异步操作的完成，
> 
> 所以下次then的调用必须要等上次then回调函数执行完成，即等上次then对应的异步任务的完成

then方法返回的Promise对象生成逻辑如下：

> 当回调函数的返回值是一个Promise对象时，then就返回一个和该Promise对象有相同状态和结果的新的Promise对象
> 
> 当回调函数的返回值是一个非Promise对象时，then就返回一个fulfilled状态，以及将回调函数返回值作为结果的新的Promise对象

function Promise(executor){
        this.promiseState = 'pending'
        this.promiseResult = null
        this.callback = null
    
        let that = this
        function resolve(data) {
            that.promiseState = 'fulfilled'
            that.promiseResult = data
            if(that.callback) {
                that.callback.onResolve()
            }
        }
    
        function reject(data) {
            that.promiseState = 'rejected'
            that.promiseResult = data
            if(that.callback){
                that.callback.onReject()
            }
        }
    
        executor(resolve,reject)
    }
    
    Promise.prototype.then = function(onResolve, onReject){
        let that = this
        return new Promise((resolve,reject)=>{
            function common(p) {
                if(p instanceof Promise){
                    p.then(v => {
                        resolve(v);
                    }, r => {
                        reject(r);
                    })
                } else {
                    resolve(p)
                }
            }
    
    
            if(that.promiseState === 'fulfilled') {
                let p = onResolve(that.promiseResult)
                common(p)
            } else if(that.promiseState === 'rejected') {
                let p = onReject(that.promiseResult)
                common(p)
            } else {
                that.callback = {
                    onResolve : function(){
                        let p = onResolve(that.promiseResult)
                        common(p)
                    },
                    onReject : function() {
                        let p = onReject(that.promiseResult)
                        common(p)
                    }
                }
            }
        })
    }
    
    function p1() {
        return new Promise(
            function(resolve,reject){
                try {
                    setTimeout(function(){
                        resolve('OK')
                    },1000)
                } catch(e) {
                    reject('NOK')
                }
    
            }
        )
    }
    
    function p2() {
        return new Promise(
            function(resolve,reject){
                try {
                    setTimeout(function(){
                        resolve('OK')
                    },2000)
                } catch(e) {
                    reject('NOK')
                }
    
            }
        )
    }
    
    function p3() {
        return new Promise(
            function(resolve,reject){
                try {
                    setTimeout(function(){
                        resolve('OK')
                    },3000)
                } catch(e) {
                    reject('NOK')
                }
    
            }
        )
    }
    
    
    p1().then(v=>{
        console.log(new Date,'a')
        return p2()
    }).then(v=>{
        console.log(new Date,'b')
        return p3()
    }).then(v=>{
        console.log(new Date,'c')
    })

这就是Promise实现异步任务串行执行的原理。

## Promise的其他特性 ##

### 1、Promise对象的状态只能修改一次，即只能从pending-》fulfilled或pending-》rejected ###

> Promise对象的状态修改，是通过resolve和reject方法，所以只要在resolve和reject方法执行前判断Promise对象的状态是pending即可，若不是pending，则状态已经被修改过，不能再次修改

function Promise(executor){
        this.promiseState = 'pending'
        this.promiseResult = null
        this.callback = null
    
        let that = this
        function resolve(data) {
            if(that.promiseState !== 'pending') return
            that.promiseState = 'fulfilled'
            that.promiseResult = data
            if(that.callback) {
                that.callback.onResolve()
            }
        }
    
        function reject(data) {
            if(that.promiseState !== 'pending') return
            that.promiseState = 'rejected'
            that.promiseResult = data
            if(that.callback){
                that.callback.onReject()
            }
        }
    
        executor(resolve,reject)
    }
    
    Promise.prototype.then = function(onResolve, onReject){
        let that = this
        return new Promise((resolve,reject)=>{
            function common(p) {
                if(p instanceof Promise){
                    p.then(v => {
                        resolve(v);
                    }, r => {
                        reject(r);
                    })
                } else {
                    resolve(p)
                }
            }
    
    
            if(that.promiseState === 'fulfilled') {
                let p = onResolve(that.promiseResult)
                common(p)
            } else if(that.promiseState === 'rejected') {
                let p = onReject(that.promiseResult)
                common(p)
            } else {
                that.callback = {
                    onResolve : function(){
                        let p = onResolve(that.promiseResult)
                        common(p)
                    },
                    onReject : function() {
                        let p = onReject(that.promiseResult)
                        common(p)
                    }
                }
            }
        })
    }

### 2、一个Promise对象可以调用多次then方法，且后面的不会覆盖前面的 ###

> 一个Promise对象的多次then方法调用，当前代码是会发生覆盖的，因为对于异步任务封装而言，Promise对象调用then方法就是将回调函数保存到Promise对象callback属性中，等待异步任务完成后调用。
> 
> 一个Promise对象的多次then方法调用，就是将多个then方法保存到Promise对象callback属性中，当前callback属性设计就是一个对象，所以每次then调用都会导致callback属性指向改变，即覆盖现象。

function Promise(executor){
        this.promiseState = 'pending'
        this.promiseResult = null
        this.callback = []
    
        let that = this
        function resolve(data) {
            if(that.promiseState !== 'pending') return
            that.promiseState = 'fulfilled'
            that.promiseResult = data
            if(that.callback) {
                that.callback.forEach(item=>{item.onResolve()})
            }
        }
    
        function reject(data) {
            if(that.promiseState !== 'pending') return
            that.promiseState = 'rejected'
            that.promiseResult = data
            if(that.callback){
                that.callback.forEach(item=>{item.onReject()})
            }
        }
    
        executor(resolve,reject)
    }
    
    Promise.prototype.then = function(onResolve, onReject){
        let that = this
        return new Promise((resolve,reject)=>{
            function common(p) {
                if(p instanceof Promise){
                    p.then(v => {
                        resolve(v);
                    }, r => {
                        reject(r);
                    })
                } else {
                    resolve(p)
                }
            }
    
    
            if(that.promiseState === 'fulfilled') {
                let p = onResolve(that.promiseResult)
                common(p)
            } else if(that.promiseState === 'rejected') {
                let p = onReject(that.promiseResult)
                common(p)
            } else {
                that.callback.push({
                    onResolve : function(){
                        let p = onResolve(that.promiseResult)
                        common(p)
                    },
                    onReject : function() {
                        let p = onReject(that.promiseResult)
                        common(p)
                    }
                })
            }
        })
    }

### 3、当我们指定的executor函数，回调函数出现异常时，我们应该做容错机制，此时应该产生一个状态为rejected，结果为异常信息的Promise对象 ###

function Promise(executor){
        this.promiseState = 'pending'
        this.promiseResult = null
        this.callback = []
    
        let that = this
        function resolve(data) {
            if(that.promiseState !== 'pending') return
            that.promiseState = 'fulfilled'
            that.promiseResult = data
            if(that.callback) {
                that.callback.forEach(item=>{item.onResolve()})
            }
        }
    
        function reject(data) {
            if(that.promiseState !== 'pending') return
            that.promiseState = 'rejected'
            that.promiseResult = data
            if(that.callback){
                that.callback.forEach(item=>{item.onReject()})
            }
        }
    
        try {
            executor(resolve,reject)
        } catch (e) {
            reject(e)
        }
    
    }
    
    Promise.prototype.then = function(onResolve, onReject){
        let that = this
        return new Promise((resolve,reject)=>{
            function common(p) {
                if(p instanceof Promise){
                    p.then(v => {
                        resolve(v);
                    }, r => {
                        reject(r);
                    })
                } else {
                    resolve(p)
                }
            }
    
    
            if(that.promiseState === 'fulfilled') {
                try {
                    let p = onResolve(that.promiseResult)
                    common(p)
                } catch (e) {
                    reject(e)
                }
            } else if(that.promiseState === 'rejected') {
                try {
                    let p = onReject(that.promiseResult)
                    common(p)
                } catch (e) {
                    reject(e)
                }
            } else {
                that.callback.push({
                    onResolve : function(){
                        try {
                            let p = onResolve(that.promiseResult)
                            common(p)
                        } catch (e) {
                            reject(e)
                        }
                    },
                    onReject : function() {
                        try {
                            let p = onReject(that.promiseResult)
                            common(p)
                        } catch (e) {
                            reject(e)
                        }
                    }
                })
            }
        })
    }

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/20210915121305877.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5LyP5Z-O5LmL5aSW,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/20210915122000184.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5LyP5Z-O5LmL5aSW,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/20210915122505620.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5LyP5Z-O5LmL5aSW,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 3]: https://img-blog.csdnimg.cn/20210915123228624.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5LyP5Z-O5LmL5aSW,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 4]: https://img-blog.csdnimg.cn/20210915124302304.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5LyP5Z-O5LmL5aSW,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 5]: https://img-blog.csdnimg.cn/20210915124411480.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5LyP5Z-O5LmL5aSW,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 6]: https://img-blog.csdnimg.cn/20210915131121730.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5LyP5Z-O5LmL5aSW,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 7]: https://img-blog.csdnimg.cn/20210915162633930.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5LyP5Z-O5LmL5aSW,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 8]: https://img-blog.csdnimg.cn/20210915163017420.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5LyP5Z-O5LmL5aSW,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 9]: https://img-blog.csdnimg.cn/20210915163300668.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5LyP5Z-O5LmL5aSW,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 10]: https://img-blog.csdnimg.cn/20210915164138710.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5LyP5Z-O5LmL5aSW,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 11]: https://img-blog.csdnimg.cn/20210915164608129.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5LyP5Z-O5LmL5aSW,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 12]: https://img-blog.csdnimg.cn/2021091517123448.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5LyP5Z-O5LmL5aSW,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 13]: https://img-blog.csdnimg.cn/20210915171955450.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5LyP5Z-O5LmL5aSW,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 14]: https://img-blog.csdnimg.cn/20210915174254179.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5LyP5Z-O5LmL5aSW,size_20,color_FFFFFF,t_70,g_se,x_16