Promise核心基础

基础

Promise

• 抽象表达：是js中进行异步编程的新的解决方案
• 具体解释：1、从语法上来说是一个构造函数 2、从功能上来说promise对象用来封装一个异步操作并可以获取其结果
• 状态改变：0、new实例为pending（未知）状态 1、pending变为resolved（成功） 2、pending变为rejected（失败）
  一个promise对象只能改变一次，成功结果数据一般为value，失败结果数据一般为reason

示例代码

    const p1 =  new Promise
    (
        function(resolve, reject) // 这里的参数为两个处理函数，该函数称为执行器函数（执行异步任务），该函数为同步回调
        {
            setTimeout
            (
                function()
                {
                    if(Date.now() % 2 === 0)
                    {
                        resolve('成功的数据！');
                    }
                    else
                    {
                        reject('失败的数据！');
                    }
                },1000
            )
        }
    )

基本使用

        var x;

        function fun1()
        {
            return new Promise
            (
                function(resolve, reject)
                {
                    // 模拟异步任务
                    setTimeout
                    (
                        function()
                        {
                            console.log('get data successfully'); // 完成数据的接收，并将其处理抛出
                            resolve('datax');
                        },2000
                    )
                }
            )
        }

        fun1().then( (value) => { x = value; console.log(x); } ); // 在回调函数内部将数据输出

        // 语法糖
        const p1 = Promise.resolve(1); // 构建一个产生一个成功数据为1的promise对象
        const p2 = Promise.reject(0); // 构建一个产生一个失败数据为0的promise对象

        p1.then( (value) => { console.log(value); } );
        p2.catch( (reason) => { console.log(reason); } );


        // Promise.all
        const allP = Promise.all([p1, p2]); // 参数为一个包含promise对象的数据

        // 对象数组中有一个promise对象返回错误就会得到错误结果，成功的数据将返回一个数组保存（顺序按照对象数组内的顺序）
        allP.then( value => { console.log('onResolved') } ).catch( reason => { console.log('onRejected', reason) } );

        // Promise.race 了解（结果为第一个完成的promise实例对象的结果）
        Promise.race([p2, p1]).then( value => { console.log('111') } ).catch( reason => { console.log('000') } );

关键问题

• promise实例对象返回的新promise的结果由指定的对应的回调函数的执行结果来决定
  • 详细解释：
    • 如果抛出异常，新的promise状态为rejected，reason为抛出的异常
    • 如果返回值为任意非promise的值，新的promise状态变为resolved，value的值为返回的值
    • 若返回值为一个新的promise，则该promise的结果就会称为新promise的结果

代码示例

        new Promise
        (
            function(resolve, reject)
            {
                resolve('正确的输出结果');
            }
        ).then(value => {console.log('value1', value); return 111;}, reason => {console.log('reason1', reason)}).then(value => {console.log('value2', value)}, reason => {console.log('reason1', reason)});

关键问题2

• 成功或者失败的回调是异步的

• 执行器函数内部的内容是同步执行（关键！）

代码示例

        new Promise(
            function(resolve, reject){
                setTimeout(
                    function(){
                        resolve('成功返回的数据');
                        console.log('这是resolve语句后的内容');
                    }
                )
            }
        ).then(value => {console.log(value)}).catch(reason => {console.log(reason)});

异常穿透

示例代码

        new Promise
        (
            function(resolve, reject)
            {
                reject('onRejected');
            }
        ).then
        (
            value => { console.log('value1', value) },
            // reason => { console.log('reason1', reason) }  // 若不传入失败的回调函数，相当于 reason => {throw reason}
        ).then
        (
            value => { console.log('value2', value) },
            // reason => { console.log('reason1', reason) }
        ).then
        (
            value => { console.log('value3', value) },
            // reason => { console.log('reason1', reason) }
        ).catch
        (
            reason => { console.log('reason', reason); return new Promise( ()=>{} ); }  // 返回一个pending状态的promise实例对象终止链式调用
        ).then
        (
            value => { console.log('value4', value) },
            reason => { console.log('reason4', reason) }
        )

宏队列与微队列（补充）

• 宏队列：dom事件回调、ajax回调、定时器回调
• 微队列：promise回调、mutation回调
• 注意！：在执行每个宏任务前，都要将微任务执行完

示例代码

        setTimeout(function(){
            console.log('延迟定时器1');
            Promise.resolve('promise3').then(value => {console.log(value)});
        },0);

        setTimeout(function(){
            console.log('延迟定时器2');
        },0);

        Promise.resolve('promise1').then(value => {console.log(value)});

        Promise.resolve('promise2').then(value => {console.log(value)});