JS 異步編程與Promise，還有async與await實例

時間 2020-12-07

標籤 php html ajax promise app less 異步 this url 欄目 JavaScript 简体版

原文原文鏈接

異步加載圖片體驗js任務操做：php

    <script>
        function loadImg(src, resolve, reject) {
            let img = new Image();
            img.src = src;
            img.onload = () => {
                resolve(img);
            };
            img.onerror = reject;
        }
        loadImg('images/1.jpg', img => {
            console.log('加載成功~');
            document.body.append(img);
        }, () => {
            console.log('加載失敗~');
        })
    </script>

定時器的任務輪詢：html

<!doctype html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <style>
        div {
            width: 100px;
            height: 100px;
            background: lightgreen;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>

<body>
    <div></div>

    <script>
        function interval(callback, delay = 100) {
            let id = setInterval(() => callback(id), delay);
        }
        interval((id) => {
            let div = document.querySelector('div');
            let left = window.getComputedStyle(div).left == 'auto' ? 0 : parseInt(window.getComputedStyle(div).left);

            div.style.left = left + 10 + 'px';
            if (left >= 200) {
                clearInterval(id);

                interval((id) => {
                    let width = parseInt(window.getComputedStyle(div).width);
                    div.style.width = width - 10 + 'px';
                    if (width <= 20) {
                        clearInterval(id);
                    }
                })
            }
        });
    </script>
</body>

</html>

經過文件依賴瞭解任務排序：ajax

    <script>
        // 先走主進程，再執行隊列
        function load(src, resolve) {
            let script = document.createElement('script');
            script.src = src;
            script.onload = resolve;
            document.body.append(script);
        }
        load('js/func.js', () => {
            func();

            load('js/func2.js', () => {
                func2();
            });

        });

        console.log('我在執行了~');
    </script>

Promise微任務處理機制：promise

    <script>
        //pending準備階段
        // console.log(new Promise((resolve, reject) => { }))


        //fulfilled
        // console.log(new Promise((resolve, reject) => {
        //     resolve('成功');
        // }));


        //rejected
        // console.log(new Promise((resolve, reject) => {
        //     reject('失敗');
        // }));


        new Promise((resolve, reject) => {
            resolve('成功');
            // reject('失敗');
        }).then(data => {
            console.log('成功');
        }, error => {
            console.log('失敗');
        }).then(data => {
            console.log('成功2');
        }, error => {
            console.log('失敗2');
        });
    </script>

宏任務與微任務執行順序：app

    <script>
        setTimeout(() => {
            console.log('這是異步任務--宏任務，最後執行');
        }, 0);

        new Promise((resolve, reject) => {
            resolve();

            // 這是同步任務
            console.log('這是Promise裏的同步任務');

        }).then(data => {
            console.log('這是異步任務--微任務');
        });

        console.log('這是普通同步任務');
    </script>

promise單一狀態與狀態中轉：less

    <script>
        let p = new Promise((resolve, reject) => {
            setTimeout(function () {
                reject('失敗---');

                resolve('此時成功是無效的，由於狀態不可逆');
            }, 2000)
        });

        new Promise((resolve, reject) => {
            // 狀態中轉，以傳遞過來的結果爲準
            resolve(p);
        }).then(res => {
            console.log('成功' + res);
        }, err => {
            console.log('失敗' + err);
        });
    </script>

瞭解Promise.then的基本語法：異步

    <script>

        // new Promise((resolve, reject) => {
        //     resolve('買了一瓶可樂');
        // }).then(res => {
        //     console.log(res);
        // }, err => {
        //     console.log(err);
        // });


        //只傳遞成功的狀態
        // new Promise((resolve, reject) => {
        //     resolve('買了一瓶可樂');
        // }).then(res => {
        //     console.log(res);
        // });


        //只傳遞失敗的狀態
        // new Promise((resolve, reject) => {
        //     reject('漲價了，買不起');
        // }).then(null, err => {
        //     console.log(err);
        // });


        //屢次傳遞
        new Promise((resolve, reject) => {
            reject('漲價了，買不起');
        }).then(null, err => {
            console.log(err);
        }).then(null, err => {
            console.log(err);
        });
    </script>

promise then 也是一個promiseui

    <script>

        // let p1 = new Promise((resolve, reject) => {
        //     resolve('fufilled');
        // });

        // // .then返回的也是一個promise
        // let p2 = p1.then(
        //     success => console.log(success),
        //     err => console.log(err),
        // );

        // console.log(p1); // （已完成狀態）
        // console.log(p2); // 添加到微任務裏，尚未處理（是準備狀態）

        // //宏任務
        // setTimeout(function () {
        //     console.log(p1); // （已完成狀態）
        //     console.log(p2); // 因爲微任務執行早於宏任務，所以當執行到宏任務時，微任務已經執行完畢（是已完成狀態）
        // });



        let p1 = new Promise((resolve, reject) => {
            reject('error');
        });

        // .then返回的也是一個promise
        let p2 = p1.then(
            success => console.log(success),
            err => console.log(err),
        ).then(
            success => console.log('上一步操做完成'),
            err => console.log('上一步操做失敗'),
        );
    </script>

then返回值的處理技巧：this

    <script>

        // 第一次then返回具體的值
        // let p1 = new Promise((resolve, reject) => {
        //     resolve('success');
        // }).then(
        //     success => 'cyy',
        //     err => console.log(err),
        // ).then(
        //     value => console.log(value),
        //     err => console.log(err),
        // );


        // 第一次then返回promise狀態
        let p1 = new Promise((resolve, reject) => {
            resolve('success');
        }).then(
            success => {
                return new Promise((resolve, reject) => {
                    reject('失敗了呀~');
                });
            },
            err => console.log(err),
        ).then(
            value => console.log(value),
            err => console.log(err),
        );
    </script>

其餘類型的promise封裝：url

    <script>

        // 若是第一次的then返回值是對象，而且含有then方法，那麼會被封裝成promise返回
        // let p1 = new Promise((resolve, reject) => {
        //     resolve('success');
        // }).then(
        //     success => {
        //         return {
        //             then(resolve, reject) {
        //                 resolve('我被封裝成promise啦');
        //             }
        //         }
        //     },
        //     err => console.log(err),
        // ).then(
        //     value => console.log(value),
        //     err => console.log(err),
        // );


        // 若是第一次的then返回值是類，而且含有then方法，那麼會被封裝成promise返回
        // let p1 = new Promise((resolve, reject) => {
        //     resolve('success');
        // }).then(
        //     success => {
        //         class Func {
        //             then(resolve, reject) {
        //                 resolve('我被封裝成promise啦');
        //             }
        //         }
        //         return new Func();
        //     },
        //     err => console.log(err),
        // ).then(
        //     value => console.log(value),
        //     err => console.log(err)
        // );


        // 若是第一次的then返回值是類的靜態方法then，那麼會被封裝成promise返回
        let p1 = new Promise((resolve, reject) => {
            resolve('success');
        }).then(
            success => {
                return class Func {
                    static then(resolve, reject) {
                        resolve('我被封裝成promise啦');
                    }
                };
            },
            err => console.log(err),
        ).then(
            value => console.log(value),
            err => console.log(err)
        );
    </script>

使用promise封裝ajax異步請求：

   <script>
        function request(url) {
            return new Promise((resolve, reject) => {
                let xhr = new XMLHttpRequest();
                xhr.open(url, 'GET');
                xhr.send();
                xhr.onload = function () {
                    if (this.status == 200) {
                        resolve(JSON.Parse(this.response));
                    } else {
                        reject('加載失敗');
                    }
                }
                xhr.onerror = function () {
                    reject(this);
                }
            });
        }

        let url = `http://localhost:8080`;
        request(`${url}/user.php?name='cyy'`).then(user => {
            return request(`${url}/info.php?uid=${user.id}`);
        }).then(lesson => {
            console.log(lesson);
        });
    </script>

promise多種錯誤檢測與catch使用：

    <script>
        //reject返回Error
        // new Promise((resolve, reject) => {
        //     reject(new Error('error錯誤'));
        // }).then(val => {
        //     console.log(val);
        // }, err => {
        //     console.log(err);
        // });

        // new Promise((resolve, reject) => {
        //     reject(new Error('error錯誤'));
        // }).then(val => {
        //     console.log(val);
        // }, err => {
        //     console.log(err.message);
        // });


        // 直接拋出異常
        // new Promise((resolve, reject) => {
        //     throw new Error('拋出異常');
        // }).then(val => {
        //     console.log(val);
        // }, err => {
        //     console.log(err);
        // });


        // 自動拋出異常
        // new Promise((resolve, reject) => {
        //     cyy + 1;
        // }).then(val => {
        //     console.log(val);
        // }, err => {
        //     console.log(err);
        // });


        // catch捕獲異常
        new Promise((resolve, reject) => {
            reject('失敗啦');
        }).then(val => {
            console.log(val);
        }).catch(err => {
            console.log(err);
        });

    </script>