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>

上面代碼的執行順序是：