ES6---Promise 3: Promise狀態和狀態中轉
- 1. JavaScript是單執行緒，多任務機制
- 2. 理解Promise任務佇列
- 3. 真正的理解Promise狀態的變化
- 4. Promise狀態中轉
- 5. 該執行什么方法
- 6. 語法糖
- 7. 模擬多任務的作業
看如下代碼和列印出的結果來逐一理解
1.
var p1 = new Promise((resolve, reject) => { }).then(result => { }, error => { }); console.log(p1); //pending
console: pending狀態
2.
var p1 = new Promise((resolve, reject) => { resolve('成功'); }).then(result => { }, error => { }); console.log(p1); //resolved
console: resolved狀態
3.
var p1 = new Promise((resolve, reject) => { // resolve('成功'); reject('成功'); }).then( null, () => { } );
console:
4.
var p1 = new Promise((resolve, reject) => { // resolve('成功'); reject('成功'); }).then(result => { }, error => { }); console.log(p1);
console:
5.
var p1 = new Promise((resolve, reject) => { // resolve('成功'); reject('成功'); }); var p2 = p1.then( result => { }, error => { } ); console.log(p1); console.log(p2);
console: 可以看出，then也是一個promise
6.
var p1 = new Promise((resolve, reject) => { // resolve('成功'); reject('成功'); }); var p2 = p1.then( result => { }, error => { console.log('aaa'); } ); console.log(p1); console.log(p2);
console:
7.
var p1 = new Promise((resolve, reject) => { // resolve('成功'); console.log('1'); reject('成功');//主執行緒代碼 }); var p2 = p1.then( result => { }, error => { console.log('aaa'); } );//then肅然也是個promise但屬于微任務佇列 console.log('2'); console.log(p1);//p1執行了嗎？答案是執行了，狀態是rejected console.log(p2);//p2執行了嗎？答案是沒有，狀態是pending
console: 注意執行順序
8.
var p1 = new Promise((resolve, reject) => { // resolve('成功'); console.log('1'); reject('成功');//主執行緒代碼 }); var p2 = p1.then( result => { }, error => { console.log('aaa'); } );//then肅然也是個promise但屬于微任務佇列 console.log('2'); console.log(p1);//p1執行了嗎？答案是執行了，狀態是rejected //把這個任務丟到任務佇列，等1秒，代碼繼續只能給 setTimeout(() => { console.log(p2);//p2執行了嗎？答案-->執行了 }, 1000);
console: 此時p2的狀態是resolved, 成功執行了
9.
var p1 = new Promise((resolve, reject) => { // resolve('成功'); console.log('1');//主執行緒代碼 resolve('我成功了');//主執行緒代碼 }); var p2 = p1.then( result => { console.log(result); }, //then會判斷p1的狀態是resolve,就執行result()代碼 //這里result輸出的是發通知出來的字串‘我成功了’ error => { console.log('aaa'); } );
console:
then會判斷p1的狀態是resolve, 就執行result()代碼 這里result輸出的是發通知出來的字串‘我成功了’ 所以console列印出來的結果如下：
10.
var p1 = new Promise((resolve, reject) => { resolve('p1 成功'); }).then(null, null); var p2 = new Promise((resolve, reject) => { resolve('p2 成功'); }).then(result => { console.log(result); //p2 成功 }, error => { });
console:
11.
var p1 = new Promise((resolve, reject) => { resolve('p1 成功'); }).then(result => { console.log('微任務的' + result); //微任務的p1成功 }); var p2 = new Promise((resolve, reject) => { resolve('p2 成功'); }).then(result => { console.log('微任務的' + result); //微任務的p2 成功 }, error => { });
console:
12.
var p1 = new Promise((resolve, reject) => { resolve('p1 成功'); }); var p2 = new Promise((resolve, reject) => { resolve(p1);//resolve一個沒有then的promise物件，而不是字串 }).then(result => { console.log('微任務2的:' + result); //微任務的p2 成功 }, error => { });
console:
13.
var p1 = new Promise((resolve, reject) => { resolve('p1 成功'); }).then(() => { }); var p2 = new Promise((resolve, reject) => { resolve(p1); }).then(result => { console.log('微任務2的:' + result); //微任務的p2 成功 }, error => { });
console:
14. 狀態中轉, 該執行什么方法
var p1 = new Promise((resolve, reject) => { reject('我是promise1 發出拒絕'); });//此時p1的狀態是什么？ 答案是rejected var p2 = new Promise((resolve, reject) => { //resolve沒有then的promise物件，而不是字串 console.log(p1); //狀態rejected resolve(p1); //考慮p1的狀態? rejected失敗 }).then(result => { console.log('微任務2-成功:' + result); }, error => { console.log('微任務2-失敗:' + error); });
console:
15. 狀態一旦確定了，就不可逆
var p1 = new Promise((resolve, reject) => { reject('我是promise1 發出拒絕');//主執行緒 resolve('我是promise1 發出成功');//主執行緒 執行了，但有沒有用？ console.log('8888'); //主執行緒 });//此時p1的狀態是什么？ 答案是rejected //狀態一旦確定了，就不可逆 var p2 = new Promise((resolve, reject) => { //resolve沒有then的promise物件，而不是字串 console.log(p1); //狀態rejected resolve(p1); //考慮p1的狀態? 失敗 }).then(result => { console.log('微任務2-成功:' + result); }, error => { console.log('微任務2-失敗:' + error); });
console: 8888列印了，說明resolve()執行了，但是沒有用而已
問上面有幾個promise?答案是3個promise，可寫成這樣：
var p1 = new Promise((resolve, reject) => { reject('我是promise1 發出拒絕'); resolve('我是promise1 發出成功'); console.log('8888'); //8888 }); var p2 = new Promise((resolve, reject) => { console.log(p1); //p1狀態 rejected resolve(p1); //考慮p1狀態=> 失敗 }); var p3 = p2.then(result => { console.log('微任務2-成功:' + result); }, error => { console.log('微任務2-失敗:' + error); //微任務2-失敗：我是promise1 發出拒絕 })
16. 繼續看下p1 p2 p3狀態
var p1 = new Promise((resolve, reject) => { reject('我是promise1 發出拒絕'); }); var p2 = new Promise((resolve, reject) => { console.log(p1); //p1狀態 rejected resolve(p1); //考慮p1狀態=> 失敗 }); var p3 = p2.then(result => { console.log('微任務2-成功:' + result); }, error => { console.log('微任務2-失敗:' + error); //微任務2-失敗：我是promise1 發出拒絕 }) //看下p1 p2 p3狀態 setTimeout(() => { console.log(p1); console.log(p2); console.log(p3); }, 0);
console:
17.
var p1 = new Promise((resolve, reject) => { console.log(1);//列印1 setTimeout(() => { reject('我是promise1 發出拒絕'); }, 5000);//丟到宏任務，等微任務佇列執行完執行代碼 }); var p2 = new Promise((resolve, reject) => { console.log(2);//列印2 console.log(p1); //在主執行緒 列印promise1的狀態 resolve(p1); //等p1發出通知（等到主執行緒全部執行完，執行宏任務）必須等，且確保p1的狀態已經確認 }).then(result => { console.log('微任務2-成功:' + result); }, error => { console.log('微任務2-失敗:' + error); //最后列印 })
console:
=> 等=> 
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/122030.html
標籤：JavaScript