ES6---async, await, promise 綜合例子

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: