欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

ES6---Promise应用: async, await

程序员文章站 2022-07-02 09:33:38
ES6 Promise应用: async, await 前端两项工作 1.ui 2.交互 Promise的应用 (Promise挺强大的) 1. async/await 就是基于promise的实现 (语法糖) 2. axios, fetch API(新一代语法取代jquery的ajax), 同样是 ......

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:

ES6---Promise应用: async, await

 

 2. 

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

        }
        console.log(typeof k2);

 

console:

ES6---Promise应用: async, await

 

 3. k2()

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

        }
        console.log(k2());

 

console:

ES6---Promise应用: async, await

 

 

以上: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:

ES6---Promise应用: async, await

 

 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:

ES6---Promise应用: async, await

 

 

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:

ES6---Promise应用: async, await

 

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:

ES6---Promise应用: async, await

4秒后ES6---Promise应用: async, await

 8. 以上aysnc函数进一步简化,对比如下

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

 

console:

ES6---Promise应用: async, await

 

 

9. 和10一起对比观察

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

        })

 

console:

ES6---Promise应用: async, await

10. 

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

 

console:

ES6---Promise应用: async, await

 

 11. 对比如下:

ES6---Promise应用: async, await

 

 

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:

ES6---Promise应用: async, await

ES6---Promise应用: async, await

 

 

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:

ES6---Promise应用: async, await

 

14. 上面的放下面代码图片,对比看下

ES6---Promise应用: async, await

 

 

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:

ES6---Promise应用: async, await