什么是promise？

promise是js直接中进行异步编程的新的解决方案

promise的基本使用

Promise构造函数接受一个函数作为参数，该函数的两个参数分别是 resolve和reject 。它们是两个函数，由JavaScript引擎提供，不用自己部署。

创建一个promise
var p = new Promise((resolve,reject) => {
  // 执行器函数
  1、成功 调用resolve(value)
  2、失败 调用reject(resaon)
})
p.then(
    value => { // 接收得到的成功的value数据
  },
    reason => { // 接收得到的失败的reason数据
  }
)

promise的三种状态：ending 、resolved（又称Fulfilled）、rejected

• promise 对象初始化状态为 pending
• 当调用resolve(成功)，会由pending => resolved
• 当调用reject(失败)，会由pending => rejected
  注：promise一旦状态改变，就不会再改，

一个promise指定多个成功/失败的回调函数，当promise改变为对应状态时都会调用

        var p = new Promise((resolve,reject) => {
            setTimeout(() => {
                console.log('上课了')
                resolve()
            },10)
        })    
        p.then(() => {
            console.log('班长：起立')
        })
        p.then(() => {
            console.log('同学们：老师好')
        })

改变promise状态与指定回调函数谁先谁后？

• 都有可能 正常情况下是先指定回调再改变状态，但也可以先改变状态再指定回调
• 如何先改变状态，再指定回调
  在执行器函数中直接调用resolve/reject，延迟更长时间才调用then()
• 什么时候才能得到数据？
  如果先指定回调，当状态改变时，回调就会先调用，得到数据
  如果先改变状态，那当指定回调时，回调函数就会调用，得到数据

        // 先指定回调函数，后改变状态
        var p = new Promise((resolve,reject) => {
            setTimeout(() => {
                // 后改变状态,同时传递数据，异步执行回调函数
                resolve('成功')
            },3000)
        }).then((value) => {
            // 先指定回调函数，保存当前指定的回调函数
            console.log('我是回调函数')
            console.log(value)
        })

        // 先改变状态，后指定回调函数
        var p = new Promise((resolve, reject) => {
            // 先改变状态，同时传递数据
            resolve('马上就成功') 
        })
        setTimeout(() => {
            // 后指定回调函数，异步执行回调函数
            p.then((value) => {
                console.log(value)
            })
        },1000)

Promise.prototype.then()

Promise实例生成以后，可以用then方法分别指定Resolved状态和Reject状态的回调函数。then 方法可以接受两个回调函数作为参数。第一个回调函数是Promise对象的状态变为Resolved时调用，第二个回调函数是Promise对象的状态变为 Reject时调用。其中，第二个函数是可选的，不一定要提供。]

then方法返回的是一个新的Promise实例(注意，不是原来那个Promise实例)。因此可以采用链式写法，即then方法后面再调用另一个then方法。

采用链式的then，可以指定一组按照次序调用的回调函数。这时，前一个回调函数，有可能返回的还是一个Promise对象(即有异步操作)，这时后一个回调函数，就会等待该Promise对象的状态发生变化，才会被调用。

promise.then()返回新的peomise的结果状态由前一个指定的回调函数执行的结果决定：

• 如果抛出异常，新promise变为resolved ，reason为抛出的异常
• 如果返回的是非promise的任意值，新peomise变为resolved，value为返回的值
• 如果返回的是另一个新的peomise，此promise的结果会成为新的promise的结果

        var p = new Promise((resolve,reject) => {
                resolve('成功')
        })
        .then(
            value => { 
                //  没有指定返回值，是一个非promise的任意值
                console.log('resolve1',value) 
            },reason => {
                console.log('reject1', reason) 
            })
        .then(
            value => {
                // 根据上一个函数的结果，状态为resolved, 调用
                console.log('resolve2', value) 
            }, reason => {
                console.log('reject2', reason) 
            })
        // resolve1 成功
        // resolve2 undefined  

        var p = new Promise((resolve,reject) => {
                resolve('成功')
        })
        .then(
            value => { 
              //  根据执行器函数结果，调用成功函数
                console.log('resolve1',value) 
                throw '失败了'
            },reason => {
                console.log('reject1', reason) 
            })
        .then(
            value => {
                console.log('resolve2', value) 
            }, reason => {
            // 根据上一个then的函数返回结果，调用reject，reason为错误原因
                console.log('reject2', reason) 
            })

        // resolve1 成功
        // reject2 失败了

如何中断promise链？

• 当使用promise的then链式调用时，在中间中断，不再调用后面的回调函数
  办法：在回调函数中返回一个pendding状态的promise对象

        new Promise((resolve, reject) => {
            reject(1)
        }).then(
            value => console.log(value)
        ).catch(
            reason => {
                console.log('程序报错就中断promise')
                return new Promise(() => { }) // 返回一个pending的promise
            })
        .then(
            value => console.log('如果程序报错，将不会执行到这')
        )

Promise.prototype.catch()

Promise.prototype.catch方法是.then(null, rejection)的别名，用于指定发生错误时的回调函数。

如果Promise状态已经变成Resolved，再抛出错误是无效的。

如果没有使用catch方法指定错误处理的回调函数，Promise对象抛出的错误不会传递到外层代码，即不会有任何 反应。

Promise对象的错误具有“冒泡”性质，会一直向后传递，直到被捕获为止。也就是说，错误总是会被下一个catch语句捕获。

catch方法返回的还是一个Promise对象，因此后面还可以接着调用then方法。

链式调用中，如果没有报错，会跳过catch方法，继续后面的then()方法，要是then方法里面报错，就与前面的catch无关了。

        var p = new Promise((resolved,reject) => {
            reject('失败了')
            resolved('你看我在哪？')  // 永远不会被调用
        }).then(( value ) => {
            console.log(1)
        }).then((value) => { 
            console.log(2)
        }).catch((error) => {
            // 处理前面三个Promise产生的错误
            console.log(error)
        }).then(() => {
            console.log('我是可以被调用的')
        });

return 一个 error 对象并不会抛出错误，所以不会被后续的 .catch 捕获

Promise.resolve()
  .then(() => {
    return new Error('error!!!')
  })
  .then((res) => {
    console.log('then: ', res)
  })
  .catch((err) => {
    console.log('catch: ', err)
  })

// then: Error: error!!!
//    at Promise.resolve.then (...)
//    at ...

Promise.all()

Promise.all方法用于将多个Promise实例，包装成一个新的Promise实例。且返回一个promise

p 的状态由 p1 、p2、p3决定，分成两种情况。

• 只有 p1 、p2、p3的状态都变成 fulfilled， p 的状态才会变成fulfilled ，此时 p1 、p2、p3 的返回值组成一个数组，传递给 p 的回调函数。

• 只要p1 、p2、p3之中有一个被rejected， p 的状态就变成rejected ,此时第一个被 reject实例的返回值，会传递给p的回调函数。

    let p1 = new Promise((resolve, reject) => {
        resolve(1);
    });

    let p2 = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(2);            
        },100)
    });

    let p3 = new Promise((resolve, reject) => {
        resolve(3);
    });

    Promise.all([p1, p2, p3])
        .then(data => {
            console.log(data);
            // [1, 2, 3] 结果顺序和promise实例数组顺序是一致的
        })
        .catch(error => {
            console.log(data);
        })

Promise.race()

Promise.race()是参数中有一个实例率先改变状态，p的状态就跟着改变，那个率先改变的Promise实例的返回值，就传递给p的回调函数。

Promise.race()方法，同样是将多个Promise实例，包装成一个新的Promise实例。

    let p1 = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(1);
        }, 100)
    });

    let p2 = new Promise((resolve, reject) => {
        resolve(2);
    });

    let p3 = new Promise((resolve, reject) => {
        resolve(3);
    });

    Promise.race([p1, p2, p3])
        .then(data => {
            console.log(data);
            // 2 返回那个率先改变的Promise实例的返回值
        })
        .catch(error => {
            console.log(data);
        })

Promise.resolve()

主要作用：将现有对象转为Promise对象

Promise.resolve 方法的参数分成四种情况

• 参数是一个Promise实例
  如果参数是Promise实例，那么Promise.resolve将不做任何修改、原封不动地返回这个实例

• 参数是一个thenable对象
  thenable对象指的是具有then方法的对象，Promise.resolve方法会将这个对象转为Promise对象，然后就立即执行thenable对象的then方法。

let thenable = {
  then: function(resolve, reject) {
    resolve(42);
   }
  };

let p1 = Promise.resolve(thenable); 
p1.then(function(value) {
  console.log(value);  // 42 
});

• 参数不是具有then方法的对象，或者根本不是对象
  如果参数是一个原始值，或者是一个不具有then方法的对象，则Promise.resolve方法返回一个新的Promise对象，状态为Resolved。

var p = Promise.resolve('Hello');
p.then(function (s){ 
  console.log(s)
});
// Hello

• 不带有任何参数
  Promise.resolve方法允许调用时不带参数，直接返回一个Resolved状态的Promise对象

var p = Promise.resolve();
p.then(function () {
     // ...
});

需要注意的是，立即resolve的Promise对象，是在本轮“事件循环”(event loop)的结束时，而不是在下一轮“事件循环”的开始时。

    setTimeout(function () {
        console.log('three');
    }, 0);
    Promise.resolve().then(function () {
        console.log('two');
    });
    console.log('one');
    // one 
    // two
    // three

Promise.reject()

Promise.reject(reason)方法也会返回一个新的Promise实例，该实例的状态为rejected。它的参数用法与Promise.resolve方法完全一致。

实现一个基本的promise

// 自定义promise函数模块：IIFE
(function (window) {
    const PENDING = 'pending'
    const RESOLVED = 'resolved'
    const REJECTED = 'rejected'
    // promise构造函数
    // excutor执行器函数(同步执行)
    function Promise(excutor) {
        var self = this;
        this.status = PENDING  // 给promise对象指定status属性，初始值为pending
        this.data = undefined // 给promise对象指定一个用户存储结果数据的属性
        this.callbacks = [] // 每个元素的结构{ onResolved(){}, onReject(){}}
        // 立即同步执行excutor
        function resolve(value) {
            // 如果当前状态不是pending，直接结束
            if (self.status !== PENDING) {
                return 
            }
            // 将状态改为resolved
            self.status = RESOLVED
            // 保存value数据
            self.data = value
            // 如果有待执行的callback函数，立即异步执行回调函数onResolved
            if (self.callbacks.length > 0) {
                // 异步执行
                setTimeout(() => {
                    self.callbacks.forEach(callbacksObj => {
                            callbacksObj.onResolved(value)
                    })                    
                })

            }
        }
        function reject(reason) {
            // 如果当前状态不是pending，直接结束
            if (self.status !== PENDING) {
                return
            }
            // 将状态改为resolved
            self.status = REJECTED
            // 保存value数据
            self.data = reason
            // 如果有待执行的callback函数，立即异步执行回调函数onRejected
            if (self.callbacks.length > 0) {
                // 异步执行
                setTimeout(() => {
                    self.callbacks.forEach(callbacksObj => {
                        callbacksObj.onRejected(reason)
                    })                    
                })

            }
        }
        try { 
            excutor(resolve, reject)
        } catch(error){
            // 如果执行器出现异常，promise对象变为reject状态
            reject(error)
        }    
    }


    // promise原型对象的then方法
    // 指定成功和失败的回调函数
    // 返回一个新的promise对象
    Promise.prototype.then = function (onResolved, onRejected) {
        // 向后传递成功的value
        onResolved = typeof onResolved === 'function' ? onResolved : value => value
        // 指定默认的失败的回调(实现错误/异常穿透的关键点) 向后传递失败的reason
        onRejected = typeof onRejected === 'function' ? onRejected : reason => {throw reason}

        const self = this
        // console.log(self.data)
        return new Promise((resolve, reject) => {
            // 调用指定的函数处理
            // 根据执行结果，改变return的promise的状态
            function handle(callback) {
                    // 1、如果抛出异常，return的promise就会失败，reason就是error
                    // 2、如果回调函数返回非promise，return的promise就会成功，value就是返回值
                    // 3、如果回调函数返回的是promise，return的promise结果就是这个promise的结果
                try {
                        const result = callback(self.data)
                        // 3、如果回调函数返回的是promise，return的promise结果就是这个promise的结果
                        if (result instanceof Promise) {
                            // result.then(
                            //     value => {
                            //         resolve(value) // 当result成功时，return的promise就会成功，value就是返回的值
                            //     },
                            //     reason => {
                            //         reject(reason) // 当result失败时，让return的promise也失败
                            //     }
                            // )
                            // 或者直接
                             result.then(resolve,reject)
                        } else {
                            // 2、如果回调函数返回非promise，return的promise就会成功，value就是返回值
                            resolve(result)
                        }
                    } catch (error) {
                        // 1、如果抛出异常，return的promise就会失败，reason就是error
                        reject(error)
                    }
                                    
            }

            if (self.status === PENDING) {
                // 当前状态还是peding状态，将回调函数保存起来
                self.callbacks.push({
                    onResolved(value) {
                        handle(onResolved)
                    },
                    onRejected(reason) {
                        handle(onRejected)
                    }
                })            
            } else if (self.status === RESOLVED) {
                // 如果当前是resolved 异步执行onResolved并改变return的promise状态
                setTimeout(() => {
                    // handle(onRejected)
                    handle(onResolved)
                })
            } else { // reject
                // 如果当前是resolved 异步执行onRejectd并改变return的promise状态
                setTimeout(() => {
                    handle(onRejected)
                })
            }            
        })
    }
    // promise原型对象的catch方法
    // 指定失败的回调函数
    // 返回一个新的promise对象
    Promise.prototype.catch = function (onRejected) {
        return this.then(undefined,onRejected)
    }

    
    // promise函数对象的resolve方法
    // 返回一个指定结果的成功的promise
    Promise.resolve = function (value) {
        // 如果是一般值
        // 如果是成功的promise
        // 如果是失败的promise
        return new Promise((resolve, reject) => {
            if (value instanceof Promise) {
                value.then(resolve, reject)
            } else {
                // value不是promise =》 promise 变成功，数据是value
                resolve(value)
            }
        })
    }
    // promise函数对象的reject方法
    // 返回一个指定reason的成功的promise
    Promise.reject = function (reason) {
        return new Promise((resolve, reject) => {
            reject(reason)
        })
    }
    // promise函数对象的all方法
    // 返回一个promise，只有当所有的promise都成功时才算成功，否则失败
    Promise.all = function (promises) {
        // 用来保存所有成功value数组
        const values = new Array(promises.length)
        // 计数器
        let resolvedCount = 0
        return new Promise((resolve, reject) => {
            // 遍历获取每一个promise的结果
            promises.forEach((p, index) => {
                Promise.resolve(p).then(
                    value => {
                        resolvedCount++
                        // p成功，将成功的value保存values
                        value[index] = value
                        // 如果全部成功了，将return的promise改变成功
                        if (resolvedCount === promises.length) {
                            resolve(values)
                        }
                    },
                    reason => {
                        reject(reason)
                    }
                )
            })
        })
    }
    
    // promise函数对象的race方法
    // 返回一个promise，其结果由第一个完成的promise决定
    Promise.race = function (promises) {
        return new Promise((resolve, reject) => {
            promises.forEach((p, index) => {
                // Promise.resolve(p)为了兼容传入的不是一个promise
                Promise.resolve(p).then(
                    value => {
                        resolve(value)    
                    },
                    reason => {
                        reject(reason)
                    }
                )
            })
        })
    }
    // 返回一个promise对象，在指定的时间后再确认结果
    Promise.resolveDelay = function (value,time) {
        return new Promise((resolve, reject) => { 
            setTimeout(() => {
                // value是promise
                if (value instanceof Promise) {
                    value.then(resolve, reject)
                } else {
                    // value不是promise =》 promise 变成功，数据是value
                    resolve(value)
                }
            }, time)
        })
    }
    Promise.rejectDelsy = function (reason, time) {
        return new Promise((resolve, reject) => { 
            setTimeout(() => {
                reject(value)
            }, time)
        })
    }
    // 向外暴露promise函数
    window.Promise = Promise
})(window)

关于promise的经典面试题

选了几篇有质量的promise面试题，可以做做：
1、Promise面试题
2、Promise 必知必会（十道题）
3、面试官眼中的Promise

本文参考：
《es6标准教程》
《promise核心技术》