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="https://www.cnblogs.com/jane-panyiyun/p/download.js"></script>
<script type="text/javascript">
console.log(downloadData());
</script>
console:
29.
<script src="https://www.cnblogs.com/jane-panyiyun/p/download.js"></script>
<script type="text/javascript">
console.log(downloadData());
</script>
console:
30.
console:
31.
<script src="https://www.cnblogs.com/jane-panyiyun/p/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單執行緒，多任務的功能
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/122051.html
標籤：JavaScript
上一篇：React添加事件
下一篇：React 中 ref 的使用