async/await

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开始执行，2秒之后，promise resolve了，并返回了值为20，这时await才拿到返回值20，然后赋值给result，暂停结束，代码才开始继续执行，执行console.log语句。