ES6---async, await, promise 綜合例子
- new Promise(主執行緒代碼).then(成功微任務, 失敗微任務);
- sync---替代promise
- await---替代then
1.
<div id="aa"></div>
<script type="text/javascript">
// new Promise(主執行緒代碼).then(成功微任務, 失敗微任務);
// async---替代promise
// await---替代then
var kk = [{ age: 18 }, { age: 19 }, { age: 20 }];
console.log(kk);
for (var i = 0; i < kk.length; i++) {
document.getElementById("aa").innerHTML += '<div>' + kk[i].age + '</div>';
console.log(kk[i]);
}
</script>
console:
2.
var kk = [{ age: 18 }, { age: 19 }, { age: 20 }]; console.log(kk); //遍歷回圈 for (const k_item of kk) { document.getElementById("aa").innerHTML += '<div>' + k_item.age + '</div>'; console.log(k_item.age);
console:
3. 延遲效果
//延遲效果 setTimeout可以實作定時效果，但是，怎么知道它結束呢？ //resolve, reject發通知，用then捕獲 var kk = [{ age: 18 }, { age: 19 }, { age: 20 }, { age: 22 }, { age: 40 }, { age: 25 }, { age: 23 }]; console.log(kk); async function sleep(sec = 1000) { return new Promise((resolve, reject) => { setTimeout(() => { resolve(); }, sec); }); } async function show() { for (const k_item of kk) { //類似于Thread.sleep(500); await sleep(500); //卡住，卡到sleep()里面的promise發出了resolve() document.getElementById("aa").innerHTML += '<div>' + k_item.age + '</div>'; }; }; show();
console:
頁面間隔500ms顯示
4.
//class 寫死的寫法 class MyTask { then(resolve, reject) { console.log('123'); }; }
console:
5.
class MyTask { then(resolve, reject) { console.log('123'); resolve('來自class的promise發出通知的值'); }; } var p = new MyTask(); console.log(p); new Promise((resolve, reject) => { resolve('a123'); }).then(result => { console.log(result); //不繼續執行就不用return,否則需要return, 7種型別都可以 return p; }, error => { }).then( result => { console.log(result); });
console:
6. 上面的代碼用async await實作
class MyTask { then(resolve, reject) { console.log('123'); resolve('來自class的promise發出通知的值'); }; } var p = new MyTask(); async function ttt() { let result = await 'a123'; console.log(result); let result2 = await p; console.log(result2); } ttt();
console:
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/118315.html
標籤：JavaScript