zoukankan      html  css  js  c++  java
  • async/await 使用

    1.在函数之间加上async意味着:函数将返回一个Promise

                    async f() {
                        return '444';
                    },
    
                    f().then(res=>{
                        console.log(res) //打印444
                    }); 

    不断的使用then()链式操作:

                    async f1() {
                        return '1111';
                    },
                    async f2() {
                        return '2222';
                    },
                    async f3() {
                        return '3333';
                    },
                    obj() {
    
                        this.f1()
                            .then(res => {
                                console.log(res);///111
                                return this.f2();
                            })
                            .then((res) => {
                                console.log(res);///222
                                return this.f3();
                            }).then((res) => {
                                console.log(res);///333
                            });
                    }

    2.await的基本语法

                    async f() {
                        let promise = new Promise((resolve, reject) => {
                            console.log('1111')
                            setTimeout(() => resolve("done!"), 2000)
                        });
                        let result = await promise; //等待promise的resolve执行完再执行
                        console.log(result); // "done!"  2s后打印
                    },
                    f();

    函数执行将会在 let result = await promise 这一行暂停,直到Promise返回结果,因此上述代码将会2秒后打印出done!

    再看:

                    fn(num) {
                        return new Promise((resolve, reject) => {
                            setTimeout(() => {
                                resolve(2 * num)
                            }, 2000);
                        })
                    },
    
    
                    async testResult() {
                        let first = await this.fn(30);
                        let second = await this.fn(50);
                        let third = await this.fn(20);
                        console.log(first + second + third);//6s后打印出200
                    }
    
              this.testResult()

    调用testResult 函数,它里面遇到了await, await 表示等一下,代码就暂停到这里,不再向下执行了,它等什么呢?等后面的promise对象执行完毕,然后拿到promise resolve 的值并进行返回,返回值拿到之后,它继续向下执行。

    再看过明了的:

                    fn1() {
                        return new Promise((resolve, reject) => {
                            setTimeout(() => {
                                resolve(console.log('我是fn1,2s后输出'))
                            }, 2000);
                        })
                    },
                    async fn2() {
                        return new Promise((resolve, reject) => {
                            setTimeout(() => {
                                resolve(console.log('我是fn2,4s后输出'))
                            }, 2000);
                        })
                    },
                    async fn3() {
                        return new Promise((resolve, reject) => {
                            setTimeout(() => {
                                resolve(console.log('我是fn3,6s后输出'))
                            }, 2000);
                        })
                    },
    
    
                    async testResult() {
                        let first = await this.fn1();
                        let second = await this.fn2();
                        let third = await this.fn3();
                        console.log('我是最后打印d'); //6s后打印出
                    }
    
           this.testResult()

    浏览器打印:

     大概的基础用法就这样

  • 相关阅读:
    可重入函数
    进程间通信的方法和实现
    Qt之Qprocess
    mysql学习(十二)内置函数
    mysql学习(十一)嵌套查询 排序 分组
    mysql学习(十)多表查询
    ubuntu 12.04 安装谷歌浏览器
    mysql学习(九)sql语句
    mysql学习(八)数据表类型-字符集
    mysql远程连接问题-http://www.cnblogs.com/jerome-rong/archive/2013/03/05/2944264.html
  • 原文地址:https://www.cnblogs.com/lwming/p/11504049.html
Copyright © 2011-2022 走看看