async&await关键词用法

桃扇骨 2021-12-04 01:34 359阅读 0赞

参考文档：[https://javascript.info/async-await][https_javascript.info_async-await]

async和await关键词通常用于和promise协同工作，下面介绍一下他们的功能和用法。

**async**

--------------------

async关键词定义在函数前，用于声明当前函数会返回一个promise对象。基本写法如下：

async function test() { 
            //do something
        }

使用async关键词时要注意以下几点：

1.  如果函数return的是一个非promise对象，则return结果会作为promise的resolved值；
2.  如果函数return的是一个promise对象，则该promise对象会直接返回；
3.  async关键词也可以用来修饰匿名函数；
4.  如果希望return结果作为promise的reject值，必须return一个reject的promise对象；

示例如下：

//以下三种写法是等价的（但明显第一种写法更为简洁）
        async function test() { 
            return "success";
        }
        async function test1() { 
            return Promise.resolve("success");
        }
        function test2() { 
            return Promise.resolve("success");
        }
        test().then(function (re) { 
            console.log(re);
        });
        test1().then(function (re) { 
            console.log(re);
        });
        test2().then(function (re) { 
            console.log(re);
        });
        //async关键词修饰匿名函数，以下三种写法都可以正常打印success
        (async function () { 
            return "success";
        })().then(function (re) { 
            console.log(re);
        });
        (async () => { 
            return "success";
        })().then(function (re) { 
            console.log(re);
        });
        let test3 = async function () { 
            return "success";
        };
        test3().then(function (re) { 
            console.log(re);
        });
        //如果希望return结果作为promise的reject值，则必须写为：return Promise.reject("xxx");
        async function test4() { 
            return Promise.reject("reject");
        }
        test4().then(function (re) { 
            console.log("success");
        }).catch(function (re) { 
            console.log(re);
        });

**await**

--------------------

await关键词定义在promise对象前，用于声明函数的后续代码必须等待await关键词修饰的promise执行完成后（resolve/reject）才能继续执行。基本写法如下：

//success字符串会在1000ms后打印
        async function test() { 
            let promise = new Promise((resolve, reject) => { 
                setTimeout(() => resolve("success"), 1000);
            });
            let re = await promise;
            console.log(re);
        }
        test();

使用await关键词时要注意以下几点：

1.  await关键词必须定义在有async关键词修饰的函数内部；
2.  如果promise走了reject分支，则必须用try-catch包括await及后续代码来捕获异常；
3.  await不会阻塞代码执行；

示例如下：

/** * await关键词没有定义在async关键词修饰的函数内部时通常编辑器就会报错 * 如果在开发阶段没有发现错误，浏览器也会给出错误提示： * Uncaught SyntaxError: await is only valid in async function */
        // let promise = new Promise((resolve, reject) => { 
        // setTimeout(() => resolve("success"), 1000);
        // });
        // let re = await promise;
        // console.log(re);
    
        /** * end字符串会立即打印，表示await没有阻塞代码执行 * failed字符串会在1000ms后打印await，表明reject分支的异常被捕获 */
        async function test() { 
            let promise = new Promise((resolve, reject) => { 
                setTimeout(() => reject("failed"), 1000);
            });
            try { 
                let re = await promise;
                console.log(re);
            }
            catch (e) { 
                console.log(e);
            }
        }
        test();
        console.log("end");

下面上一个相对完整的例子：

async function test(random) { 
            let promise = new Promise((resolve, reject) => { 
                setTimeout(() => random >= 0.5 ? resolve("success") : reject("failed"), 200);
            });
            try { 
                let re = await promise;
                return re;
            }
            catch (er) { 
                return Promise.reject(er);
            }
        }
        //有可能打印success也有可能打印failed（即可能走resolve分支也可能走reject分支）
        test(Math.random()).then(function (re) { 
            console.log(re);
        }).catch(function (er) { 
            console.log(er);
        });

[https_javascript.info_async-await]: https://javascript.info/async-await