1. var p1 = new Promise((resolve, reject) => { }); var p2 = p1.then( result => { }, error => { } ); //可以看到p1和p2都是promise，還可以看到狀態 console.log(p1); cons ...
ES6---Promise 4: 更多案例
1.
var p1 = new Promise((resolve, reject) => { }); var p2 = p1.then( result => { }, error => { } ); //可以看到p1和p2都是promise，還可以看到狀態 console.log(p1); console.log(p2);
console:
2.
var p1 = new Promise((resolve, reject) => { resolve('成功了'); }); var p2 = p1.then( result => { console.log('2'); }, error => { } ); console.log(p1); console.log(p2);
console:
3.
var p1 = new Promise((resolve, reject) => { resolve('成功了');//運行在主線程 }).then( result => { console.log('2');//運行在微任務列表 }, error => { } ); console.log('abc');
console:
4.
//傳值的問題 var p1 = new Promise((resolve, reject) => { resolve('成功了');//運行在主線程 }).then( result => { console.log('微任務接收數據:' + result);//運行在微任務列表 }, error => { } ); console.log('abc');
console:
5.
var p1 = new Promise((resolve, reject) => { resolve('成功了');//運行在主線程 }).then( result => { console.log('微任務接收數據:' + result);//運行在微任務列表 }, error => { } ).then( result => { console.log(3); }, error => { } ) console.log('abc');
console:
6.
var p1 = new Promise((resolve, reject) => { resolve('成功了');//運行在主線程 }).then( result => { console.log('微任務接收數據:' + result);//運行在微任務列表 }, error => { } ).then( result => { console.log(3 + result); }, error => { } ) console.log('abc');
console:
7. then怎麼傳值？答案用return來傳值給下麵的then
new Promise((resolve, reject) => { resolve('成功了');//運行在主線程 }).then( result => { console.log('微任務接收數據:' + result);//運行在微任務列表 //這裡怎麼傳值？答案用return return 'bbbb'; }, error => { } ).then( result => { console.log(3 + result);//3bbbb }, error => { } ) console.log('abc');
console:
8. 搞懂return
new Promise((resolve, reject) => { resolve('成功了');//運行在主線程 }).then( //箭頭函數，右邊只有一行代碼，可以去掉{}，但是要把return和分號也去掉，如下 result => 'bbbb'//今天的其中一個任務是搞定return , error => { } ).then( result => { console.log(3 + result);//運行在微任務列表 }, error => { } ) console.log('abc');
console:
9. return的類型
resolve('成功了');//運行在主線程
}).then(
//箭頭函數，右邊只有一行代碼，可以去掉{}，但是要把return和分號也去掉，如下
//return的類型：字元串，數字，Symbol
result => Symbol()//今天的其中一個任務是搞定return
, error => { }
).then(
result => {
console.log(3);
console.log(result);//運行在微任務列表
},
error => { }
)
console.log('abc');
console:
10. return{} 返回對象，註意寫法
new Promise((resolve, reject) => { resolve('成功了');//運行在主線程 }).then( //箭頭函數，右邊只有一行代碼，可以去掉{}，但是要把return和分號也去掉，如下 //return的類型：字元串，數字，Symbol, Boolean,對象{} result => { //代碼行1 //代碼行2 return {} } , error => { } ).then( result => { console.log(3); console.log(result);//運行在微任務列表 }, error => { } ) console.log('abc');
console:
11.
new Promise((resolve, reject) => { resolve('成功了');//運行在主線程 }).then( //return的類型：字元串，數字，Symbol, Boolean,對象{} result => { //代碼行1 //代碼行2 return { name: '9999' } } , error => { } ).then( result => { console.log(3); console.log(result);//運行在微任務列表 }, error => { } ) console.log('abc');
console:
12.
// Promise是什麼類型？對象 var u = new Promise(() => { }); console.log(typeof u);//object
console:
13. 和14聯繫在一起對比，觀察，可以有助於理解
new Promise((resolve, reject) => { resolve('成功了');//運行在主線程 }).then( //return的類型：字元串, 數字, Symbol, Boolean, 對象object包含promise result => { //在then裡面，return一個全新的promise //沒有then return new Promise((resolve, reject) => { }); //必須等這個then幹完活，才會繼續執行下個then //而這裡return的promise就一直在pending狀態，等promise發通知 } , error => { } ).then( result => { console.log(3); console.log(result);//運行在微任務列表 }, error => { } ) console.log('abc');
console:
14. 這裡then裡面return了一個promise並且發出了通知，所以下一個then可以執行
new Promise((resolve, reject) => { resolve('成功了');//運行在主線程 }).then( //return的類型：字元串, 數字, Symbol, Boolean, 對象object包含promise result => { //在then裡面，return一個全新的promise //沒有then return new Promise((resolve, reject) => { resolve('成功啦2') }); } , error => { } ).then( result => { console.log(3); console.log(result);//運行在微任務列表 }, error => { } ) console.log('abc');
console:
15. return underfined類型
new Promise((resolve, reject) => { resolve('成功了');//運行在主線程 }).then( //return的類型：字元串, 數字, Symbol, Boolean, 對象object包含promise, underfined result => { return undefined; } , error => { } ).then( result => { console.log(3); console.log(result);//運行在微任務列表 }, error => { } ) console.log('abc');
console:
16. return null
new Promise((resolve, reject) => { resolve('成功了');//運行在主線程 }).then( //return的類型：字元串, 數字, Symbol, Boolean, 對象object包含promise, underfined, null result => { return null; } , error => { } ).then( result => { console.log(3); console.log(result);//運行在微任務列表 }, error => { } ) console.log('abc');
console:
以上：
- return的類型：字元串, 數字, Symbol, Boolean, 對象object包含promise, underfined, null
- return 所有類型都可以（7種），但是如果object類型為promise的話，需要等待的
17.
new Promise((resolve, reject) => { resolve('成功了');//運行在主線程 }).then( result => { return new Promise((resolve, reject) => { resolve('ok');//這個通知如果不發出，下一個then不會執行 }); } , error => { } ).then( result => { console.log(3); console.log(result);//運行在微任務列表 }, error => { } ) console.log('abc');
console:
18.
new Promise((resolve, reject) => { resolve('成功了');//運行在主線程 }).then( //return的類型：字元串, 數字, Symbol, Boolean, 對象object包含promise, underfined, null //return 所有類型都可以（7種），但是如果object類型為promise的話，需要等待的 result => { return new Promise((resolve, reject) => { reject('not ok'); }); } , error => { } ).then( result => { console.log(3); console.log(result);//運行在微任務列表 }, error => { console.log(4); console.log(error); } )
console:
19.
new Promise((resolve, reject) => { resolve('成功了');//運行在主線程 }).then( //return的類型：字元串, 數字, Symbol, Boolean, 對象object包含promise, underfined, null //return 所有類型都可以（7種），但是如果object類型為promise的話，需要等待的 result => { return new Promise((resolve, reject) => { resolve('ok22') }); } , error => { } ).then( result => { console.log(3); console.log(result);//運行在微任務列表 }, error => { } ) console.log('abc');
console:
20. return的類型，其中，{}對象object包含promise或者含有then的object
new Promise((resolve, reject) => { resolve('成功了');//運行在主線程 }).then( //return的類型：字元串, 數字, Symbol, Boolean, underfined, null // {}對象object包含promise或者含有then的object //return 所有類型都可以（7種），但是如果object類型為promise的話，需要等待的 result => { return { then: '123' }; } , error => { } ).then( result => { console.log(3); console.log(result);//運行在微任務列表 }, error => { } ) console.log('abc');
console:
21.
new Promise((resolve, reject) => { resolve('成功了');//運行在主線程 }).then( //return的類型：字元串, 數字, Symbol, Boolean, underfined, null // {}對象object包含promise或者含有then的object //return 所有類型都可以（7種），但是如果object類型為promise的話，需要等待的 result => { return { then: function (resolve, reject) { } //此時查看console列印結果，會發現沒有執行 //因為這個then沒當成了promise，在等發通知 }; } , error => { } ).then( result => { console.log(3); console.log(result);//運行在微任務列表 }, error => { } ) console.log('abc');
console:
22.
new Promise((resolve, reject) => { resolve('成功了');//運行在主線程 }).then( //return的類型：字元串, 數字, Symbol, Boolean, underfined, null // {}對象object包含promise或者含有then的object //return 所有類型都可以（7種），但是如果object類型為promise的話，需要等待的 result => { return { //當函數名和對象的key一樣的時候，可以把function和key、冒號刪掉 then(resolve, reject) { resolve('人'); } }; } , error => { } ).then( result => { console.log(3); console.log(result);//運行在微任務列表 }, error => { } ) console.log('abc');
console:
23.
new Promise((resolve, reject) => { resolve('成功了');//運行在主線程 }).then( //return的類型：字元串, 數字, Symbol, Boolean, underfined, null // {}對象object包含promise或者含有then的object //return 所有類型都可以（7種），但是如果object類型為promise的話，需要等待的 result => { return { //當函數名和對象的key一樣的時候，可以把function和key、冒號刪掉 then(resolve, reject) { reject('鬼'); } }; } , error => { } ).then( result => { console.log(3); console.log(result);//運行在微任務列表 }, error => { } ) console.log('abc');
console:
24. class也是個對象
class Myclass { hi() { } } var kk = new Myclass(); console.log(kk);
console:
25.
class Myclass { hi() { } } var kk = new Myclass(); console.log(typeof kk);
console:
26. 用到then(resolve, reject){}實際就是個promise了
class Myclass { then(resolve, reject) { } } var kk = new Myclass(); console.log(kk);
console:
27.
new Promise((resolve, reject) => { resolve('成功了');//運行在主線程 }).then( //return的類型：字元串, 數字, Symbol, Boolean, underfined, null // {}對象object包含promise或者含有then的object(class) //return 所有類型都可以（7種），但是如果object類型為promise的話，需要等待的 result => { class MyClass { then(resolve, reject) { resolve('ok2') } } return new MyClass(); } , error => { } ).then( result => { console.log(3); console.log(result);//運行在微任務列表 }, error => { } ) console.log('abc');
console:
以上更新：
- return的類型：字元串, 數字, Symbol, Boolean, underfined, null
- {}對象object包含promise或者含有then的object(class)
28. 實際經常封裝成一個命名函數，可以重覆使用
<script src="./download.js"></script>
<script type="text/javascript">
console.log(downloadData());
</script>
console:
29.
<script src="./download.js"></script>
<script type="text/javascript">
console.log(downloadData());
</script>
console:
30.
console:
31.
<script src="./download.js"></script> <script type="text/javascript"> downloadData().then( result => { COV19(result).then( peopleCount => { console.log('確診人數為:' + peopleCount); } ) } ); </script>
console:
32. 顯示在頁面
<script src="./download.js"></script> <div id="aa"></div> <script type="text/javascript"> downloadData().then( result => { COV19(result).then( peopleCount => { document.getElementById("aa").innerText = '確診人數為:' + peopleCount; } ) } ); </script>
console:
33.
<script src="./download.js"></script> <div id="aa"></div> <script type="text/javascript"> downloadData().then( result => { COV19(result).then( peopleCount => { document.getElementById("aa").innerText = '確診人數為:' + peopleCount; } ) } ); </script>
console:
2秒後
34.
<script src="./download.js"></script> <div id="aa"></div> <script type="text/javascript"> downloadData().then( result => { COV19(result).then( peopleCount => { document.getElementById("aa").innerText = '確診人數為:' + peopleCount; } ) } ); document.getElementById("aa").innerText = 'loading...' </script>
console:
loading後
35.
<body> <div id="mydiv"> <div>....</div> </div> </body> <script type="text/javascript"> //JS單線程，多任務【微任務隊列，巨集任務隊列】 new Promise((resolve, reject) => { document.getElementById('mydiv').innerHTML += '<div>按下開關洗衣服</div>'; }) document.getElementById('mydiv').innerHTML += '<div>去學習</div>'; </script>
console:
36.
<script type="text/javascript"> //JS單線程，多任務【微任務隊列，巨集任務隊列】 new Promise((resolve, reject) => { //走30分鐘 document.getElementById('mydiv').innerHTML += '<div>按下開關洗衣服</div>'; setTimeout(() => { resolve('洗完了') }, 3000); }).then(result => { console.log('洗完了'); document.getElementById('mydiv').innerHTML += '<div>晾衣服</div>'; }); document.getElementById('mydiv').innerHTML += '<div>去學習</div>'; </script>
console:
3秒後通知
37.
<script type="text/javascript"> //JS單線程，多任務【微任務隊列，巨集任務隊列】 new Promise((resolve, reject) => { //走30分鐘 document.getElementById('mydiv').innerHTML += '<div>按下開關洗衣服</div>'; setTimeout(() => { resolve('洗完了'); }, 3000); }).then(result => { console.log('洗完了'); document.getElementById('mydiv').innerHTML += '<div>晾衣服</div>'; return { then(resolve, reject) { setTimeout(() => { resolve('衣服幹了'); console.log('衣服幹了'); }, 3000); } } }).then((result) => { document.getElementById('mydiv').innerHTML += '<div>收衣服</div>'; }); document.getElementById('mydiv').innerHTML += '<div>去學習</div>'; </script>
console:
以上，一個人洗衣服，收衣服的過程，模擬JS單線程，多任務的功能
