async | await

async
async 和 await 是用来处理异步的。即你需要异步像同步一样执行，需要异步返回结果之后，再往下依据结果继续执行。
async 是“异步”的简写，而 await 可以认为是 async wait 的简写。
async 用于申明一个 function 是异步的，而 await 用于等待一个异步方法执行完成。
当 async 函数没有返回值时，返回 Promise.resolve(undefined).

<script>
    async function testAsync(){
        return 'Hello world';
    }
    var result = testAsync();
    console.log(result);  // Promise {<fulfilled>: 'Hello world'}
    result.then((v) => {
        console.log(v); // Hello world
    })

    /*
    function testAsync() {
        return 'Hello World';
    }
    new Promise(function (resolve) {
        resolve(testAsync());
    }).then(function (value) {
        console.log(value);  // Hello World
    });
    */

</script>

 

await
await 只能放在 async 函数内部使用
await 用于一个异步操作之前，表示要“等待”这个异步操作的返回值。
await 也可以用于一个同步的值。
如果它等到的不是一个 Promise 对象，那 await 表达式的运算结果就是它等到的东西。
如果它等到的是一个 Promise 对象，那 await 会阻塞后面的代码，等着 Promise 对象 resolve,
然后得到 resolve 的值，作为 await 表达式的运算结果。

同步代码

<script>
    const a = await 'Hello World';
    // 上述写法会报错的:await is only valid in async functions and the top level bodies of modules
    // 相当于
    const a = await Promise.resolve('Hello World');
    // 所以直接写同步代码即可，不需要 await 关键字
    const a = 'Hello World';
</script>

 

异步代码

<script>
   // 2s 之后返回双倍的值
   function doubleAfter2seconds(num) {
       return new Promise((resolve, reject) => {
           setTimeout(() => {
               resolve(2 * num);
           }, 2000);
       });
   }
   async function testResult() {
       let result = await doubleAfter2seconds(21);
       console.log(result);  // 42
   }
   testResult();
</script>

 

 执行顺序

<script>
    function doubleAfter2seconds(num) {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve(2 * num);
            }, 2000);
        });
    }

    async function testResult() {
        console.log("内部调用前");
        // testResult方法中，该语句执行完了，后面的语句才能执行，阻塞发生在promise对象异步中。
        let result =  doubleAfter2seconds(60);
        console.log(result);
        console.log("内部调用后");
    }

    console.log("外部调用前");
    testResult();
    console.log("外部调用后");

    /*
    外部调用前
    内部调用前
    外部调用后
    60
    内部调用后
    */

    // 如果去掉 await
    /*
    外部调用前
    内部调用前
    Promise {<pending>}
    内部调用后
    外部调用后
    */
</script>

<script>
    // 2s 之后返回双倍的值
    function doubleAfter2seconds(num){
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve(2 * num);
            }, 2000);
        });
    }
    async function testResult() {
        let first = await doubleAfter2seconds(10);
        let second = await doubleAfter2seconds(20);
        let res = first + second;
        return res
    }
    testResult().then(res => {
        console.log(res);  // 60
    }).catch(error => {
        console.log(error); // 当把return res 的 res 改为 res2 时， 打印的是 ReferenceError: res2 is not defined
    })
</script>

<script>
    // 2s 之后返回双倍的值
    function doubleAfter2seconds(num) {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve(2 * num)
            }, 2000);
        })
    }
    async function testResult () {
        try {
            let first = await doubleAfter2seconds(10);
            let second = await doubleAfter2seconds(20);
            let res = first + second;
            return res3;
        } catch (error) {
            console.log(error);  // ReferenceError: res3 is not defined
        }
    }
    testResult().then(res => {
        console.log(res);  // undefined
    });
</script>