JS 異步編程與Promise，還有async與await實體-有解無憂

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

    <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>

定時器的任務輪詢：

<!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>

通過檔案依賴了解任務排序：

    <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微任務處理機制：

    <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 =https://www.cnblogs.com/chenyingying0/archive/2020/12/06/> {
            console.log('成功');
        }, error => {
            console.log('失敗');
        }).then(data => {
            console.log('成功2');
        }, error => {
            console.log('失敗2');
        });
    </script>

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

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

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

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

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

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

promise單一狀態與狀態中轉：

    <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 也是一個promise

    <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回傳值的處理技巧：

    <script>

        // 第一次then回傳具體的值
        // let p1 = new Promise((resolve, reject) => {
        //     resolve('success');
        // }).then(
        //     success => 'cyy',
        //     err => console.log(err),
        // ).then(
        //     value =https://www.cnblogs.com/chenyingying0/archive/2020/12/06/> 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封裝：

    <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 =https://www.cnblogs.com/chenyingying0/archive/2020/12/06/> 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 =https://www.cnblogs.com/chenyingying0/archive/2020/12/06/> 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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/230959.html

標籤：其他

上一篇：JavaScript DOM

下一篇：第十三章排序演算法上部分