ES6---Promise應用: async, await

ES6---Promise應用: async, await

• 前端兩項作業 1.ui  2.互動
• Promise的應用 （Promise挺強大的）
• 1. async/await 就是基于promise的實作 （語法糖）
• 2. axios, fetch API(新一代語法取代jquery的ajax), 同樣是基于Promise設計
•    (axios回傳的內容本來就是一個promise, 一般而言, 還需要再進行一次promise的封裝)

1. k2

        var k1 = new Promise((resolve, reject) => {
            resolve('ok');
        })
        console.log(k1);
        async function k2() {

        }
        console.log(k2);

console:

 2. 

        var k1 = new Promise((resolve, reject) => {
            resolve('ok');
        })
        console.log(k1);
        async function k2() {

        }
        console.log(typeof k2);

console:

 3. k2()

        var k1 = new Promise((resolve, reject) => {
            resolve('ok');
        })
        console.log(k1);
        async function k2() {

        }
        console.log(k2());

console:

以上：k2和k2()執行后的結果不一樣，前者是一個function物件，后者k2()是k2函式執行并回傳的值，這個值的型別是promise

4.

        var k1 = new Promise((resolve, reject) => {
            resolve('ok');
        })
        console.log(k1);
        //k2和k2()執行后的結果不一樣，前者是一個function物件，后者k2()是k2函式執行并回傳的值，這個值的型別是promise
        async function k2() {
            return 'ok2';
        }
        console.log(k2());

console：

 5. 

        var k1 = new Promise((resolve, reject) => {
            resolve('ok');//目的，是不是找人接手
        }).then(result => {
            console.log('收到promise傳過來的值:' + result);
        });
        console.log(k1);
        //k2和k2()執行后的結果不一樣，前者是一個function物件，后者k2()是k2函式執行并回傳的值，這個值的型別是promise
        async function k2() {
            return 'ok2';
        }
        k2().then(null);
        console.log(k2());

console:

6.

        var k1 = new Promise((resolve, reject) => {
            resolve('ok');//目的，是不是找人接手
        }).then(result => {
            console.log('收到promise傳過來的值:' + result);
        });
        console.log(k1);
        //k2和k2()執行后的結果不一樣，前者是一個function物件
        //而k2()是執行k2這個函式，并回傳一個值，這個值的型別是promise
        async function k2() {
            return 'ok2';
        }
        k2().then(result => {
            console.log('收到promise傳過來的值:' + result);
        });
        console.log(k2());

console:

7.

        //async 沒有then, return promise型別（或者一個帶then的型別{}/class）
        async function k3() {
            return new Promise((resolve, reject) => {
                setInterval(() => {
                    resolve('k3 is ok');
                }, 4000);

            })
        }
        k3().then(result => {
            console.log(result);
        }, error => { error })
        console.log(k3());

console:

4秒后

 8. 以上aysnc函式進一步簡化，對比如下

        async function k4() {
            let tt = await '123b'; //await其實就是then
            console.log(tt);
        }
        k4();

console:

9. 和10一起對比觀察

        new Promise((resolve, reject) => {
            resolve('123a');
        }).then(tt => {
            console.log(tt);
            return '456a'
        }).then(pp => {
            console.log(pp);

        })

console:

10. 

        async function k4() {
            let tt = await '123b'; //await其實就是then
            console.log(tt);
            let pp = await '456b';
            console.log(pp);
        }
        k4();

console:

 11. 對比如下:

12.

        new Promise((resolve, reject) => {
            resolve('123a');
        }).then(tt => {
            console.log(tt);
            return '456a'
        }).then(pp => {
            console.log(pp);
            return new Promise((resolve, reject) => {
                resolve('444444')
            })
        }).then(oo => {
            console.log(oo);
        })

console:

13.

        async function k4() {
            let tt = await '123b'; //await其實就是then
            console.log(tt);
            let pp = await '456b';
            console.log(pp);
            let oo = await new Promise((resolve, reject) => {
                resolve('444444b');
            })
            console.log(oo);
        }
        k4();

console:

14. 上面的放下面代碼圖片，對比看下

15.

        new Promise((resolve, reject) => {
            resolve('123a');
        }).then(tt => {
            console.log(tt);
            return '456a'
        }).then(pp => {
            console.log(pp);
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    resolve('444444');
                }, 3000);

            })
        }).then(oo => {
            console.log(oo);
        })

        async function k4() {
            let tt = await '123b'; //await其實就是then
            console.log(tt);
            let pp = await '456b';
            console.log(pp);
            let oo = await new Promise((resolve, reject) => {
                setTimeout(() => {
                    resolve('444444b');
                }, 2000);
            })
            console.log(oo);

console:

標籤：JavaScript

上一篇：二維矢量資料轉火星坐標

下一篇：checkbox中checked屬性總結【轉】