当前位置： 移动技术网 > IT编程>开发语言>JavaScript > ES6---async, await, promise 综合例子

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

2020年04月18日  | 移动技术网IT编程  | 我要评论

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:

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网