關於Promise對象的學習及它的執行順序
學習阮一峰老師的ES6入門后的記錄
1、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>
2、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>
3、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>
上面代碼的執行順序是: