Promise对象及它在js中的执行顺序

关于Promise对象的学习及它的执行顺序

学习阮一峰老师的ES6入门后的记录

一、promise的定义

promise是一个对象，一般包裹着一个异步操做，promise对象提供一些接口的方法，返回一些操做的状态或错误信息

promise有三种状态 pending(进行中)、resolved(已完成，也叫fulfilled)、rejected(已失败)

注意：promise中的状态只能由 pending -> resolved 和 pending -> rejected两种，且状态一旦确认不能转变

promise的基本用法

<script>
        let promise = new Promise(function(resolve,reject){//resolve和reject是函数
            console.log('promise建立');
            resolve();
        })
        promise.then(function(){//至关于resolve()
            // console.log(a);//error跳到.catch
            console.log('promise的执行完成了');
        })
        .catch(function(){//至关于reject()
            console.log('promise的执行失败了');
        })
    </script>

二、promise的一些方法

.then(fn1,fn2)

.then()方法中的参数，fn1是resolved状态的回调函数,fn2(可选)是rejected状态的回调函数，通常只用fn1来做为promise成功的处理函数
注意：.then()返回的是一个新的promise实例，.then(fn1)fn1中的返回的数据做为新promise的参数

.catch(fn)

.then(null/undefined,function(){})的别名，是发生错误是的回调函数
注意：在promise执行顺序中当.then()的成功处理函数执行，致使不会执行.catch()中的函数，反之同样

.finally(function(){})

不管是执行.then()仍是执行.catch(),finally都会执行

代码示例：

<script>
        let promise = new Promise(function(resolve,reject){
            let i = 1;
            resolve(i);//调用.then()中的方法
            i++;
            reject(i);//调用.catch()中的方法，不能与.then()一块儿执行
        })
        promise
        .then(function(num){
            console.log(num);
        })
        .catch(function(num){
            console.log(num);
        })
        .finally(function(){//不论执行.then仍是.catch，finally都会执行
            console.log('finally');
        })
    </script>

三、promise中的执行顺序

js执行是单线程的，因此浏览器执行会把js事件，划分为当前执行，和等待执行的栈

等待执行中的栈通常为异步事件，其中也分为宏任务和微任务之分，通常微任务在宏任务以前执行

promise对象.then,.catch为微任务

代码示例：

<script>
        setTimeout(function(){
            console.log('setTimeout执行了');//宏任务
        })
        let promise = new Promise(function(resolve,reject){
            console.log('promise执行了');//主进程
            resolve();//or reject();
        })
        promise
        .then(function(){
            console.log('.then执行了');//微任务
        })
        .catch(function(){
            console.log('.catch执行了');//微任务
        })
        .finally(function(){
            console.log('finally执行了');//微任务
        })
    </script>

上面代码的执行顺序是：