async/await

·  阅读 209

async 的用法

async 它作为一个关键字放到函数前面,用于表示函数是一个异步函数,异步函数意味着该函数的执行不会阻塞后面代码的执行

下面是一个async函数,直接加括号调用就可以了。

    async function test() {
        return 'Hello World';
    }
    console.log(test());
复制代码

查看控制台,函数返回是一个 promise 对象,我们获取到了 Hello World,同时没有阻塞后面代码的执行。

image

    async function test() {
        return 'Hello World';
    }
    test().then(res => {
        console.log(res); // Hello World
    });
    console.log('先执行');
复制代码

可以注意到,上面控制台中的 Promise 有一个 resolved,这是 async 函数内部的实现原理。如果async 函数中有返回一个值,当调用该函数时,内部会调用 Promise.resolve() 方法把它转化成一个promise 对象作为返回,如果函数内部抛出错误的时候,就会调用 Promise.reject() 返回一个promise 对象。

     async function test(flag) {
         if (flag) {
             return 'Hello World';
         } else {
             throw 'Oh my god';
         }
     }
     console.log(test(true)); // 调用Promise.resolve() 返回promise对象。
     console.log(test(false)); // 调用Promise.reject() 返回promise对象。
复制代码

image

如果函数内部抛出错误, promise 对象有一个catch 方法进行捕获。

     test().catch(err => {
         console.log(err);
     });
复制代码

await 的用法

await 意思是 async/wait(异步等待)。这个关键字只能在使用async定义的函数里面使用。任何async 函数都会默认返回 promise,并且这个 promise 解析的值都将会是这个函数的返回值,而async 函数必须等到内部所有的 await 命令的 Promise 对象执行完,才会发生状态改变。

     function getResult(num) {
         return new Promise((resolve, reject) => {
             setTimeout(() => {
                 resolve(num * 10);
             }, 2000);
         } )
     }
 
     async function testResult() {
         let result  = await getResult(2);
         console.log(result);
     }
 
     testResult(); // 2s之后输出 20
复制代码

代码的执行过程:调用 testResult 函数,遇到 await 之后,代码就暂停执行了,等待getResult(2) 执行完毕,getResult(2) 返回的 promise 开始执行,2s 之后,promise resolve 了,并返回了值为 20,这时 await 才拿到返回值 20,然后赋值给 result,暂停结束,代码才开始继续执行,执行 console.log 语句。

分类:
前端