Promise的事件迴圈
阿新 • • 發佈:2018-11-28
1.Promise 新建後立即執行
let promise = new Promise(function(resolve, reject) {
console.log('Promise');
resolve();
});
promise.then(function() {
console.log('resolved');
});
console.log('我是同步任務');
列印結果依次是:Promise , 我是同步任務 , resolved。
說明,Promise 新建後立即執行,然後, then 方法指定的回撥函式,將在當前指令碼所有同步任務執行完才會執行。
2.Promise 與setTimeout執行的先後
(1)立即執行的Promise
Promise.resolve().then(function() {
console.log('resolved');
});
console.log('我是同步任務');
setTimeout(function(){
console.log('event loop')
})
列印結果依次是: 我是同步任務 , resolved,event loop。
上面程式碼,setTimeout在下一輪“事件迴圈”開始時執行。
說明,立即 resolve 的 Promise 物件,是在本輪“事件迴圈”(event loop)的結束時,而不是在下一輪“事件迴圈”的開始時
(2)非立即執行的Promise
第一種:非同步請求的Promise:
let thenable = {
then: function(resolve, reject) {
$.ajax({
url:"test.php",
complete:function(result){
console.log('非同步資料請求完畢了');
resolve('resolved');
}
});
}
};
Promise.resolve(thenable).then(val=>console.log(val)) ;
console.log('我是同步任務');
setTimeout(function(){
console.log('event loop')
})
列印結果依次是: 我是同步任務 ,非同步資料請求完畢了,resolved,event loop。
說明:Promise 新建後立即執行,then 方法指定的回撥函式,將在當前指令碼所有同步任務執行完才會執行。最後下一輪“事件迴圈”開始時執行setTimeout。
第二種:使用setTimeout的Promise:
let thenable = {
then: function(resolve, reject) {
setTimeout(function(){
console.log('Promise');
resolve('resolved');
})
}
};
Promise.resolve(thenable).then(val=>console.log(val));
console.log('我是同步任務');
setTimeout(function(){
console.log('event loop')
})
列印結果依次是: 我是同步任務 , event loop ,Promise , resolved。
說明:Promise 指定在下一輪“事件迴圈”再執行resolved,而在下一輪“事件迴圈”中,外部的setTimeout在任務佇列中首先執行。