Await 和 Async 用法和详细解释

在学习Await 和 Async之前，最好已经学习过了 JS的 promise 和 promise.all。如果对promise还不了解的可以先看我的另外一篇：Promise、Promise.all 和Promise.race用法

在说Await 和 Async之前，我们以一张图先复习和深入了解一下promise
这里写图片描述
可以发现promise其实也是异步的方法，在执行promise方法的时候，下面的console也一起同步执行了。其实这也是一个好处，因为不建议写那么多阻塞方法。

可是如果我们的确要用到阻塞的时候，那么就要用多个promise和多个then方法嵌套，代码会显得很臃肿，不好理解。

Await 和 Async 的出现就是为了让代码看起来更加简洁

1. Async
重点：每个 async 方法都返回一个 promise 对象
举个例子：

var promise = function() {
    return new Promise(function(resolve, reject) {
        setTimeout(() => {
            resolve('wait 2')
        }, 2000);
    })
}

async function f() {
    // response 就是 promise 执行成功的值
    const response = await promise();
    console.log(response);

}

// 不能在 async 方法外面用 await
// 需要使用 then 回调函数……
f().then(() => console.log('Finished'));

程序运行结果
这也很轻松达到了我们期望的效果，等待异步程序执行完成。那么就又回到了老问题，await会和下面的代码同步执行吗？

这里写图片描述

很明显看出来，awai是一个阻塞方法，只有执行完当前的命令才会在执行下一条

实际上，async / await 在底层转换成了 promise 和 then 回调函数。也就是说，这是使用 promise 的语法糖。每次我们使用 await, 解释器都创建一个 promise 对象，然后把剩下的 async 函数中的操作放到 then 回调函数中。
以此类推，如果Await 抛出了异常，reject 我们可以用try{} catth (e) {} 的方法捕获和处理错误的异常

我们可以将大部分异步逻辑封装到一个或者几个 async 函数中，然后在非异步代码中调用。这让我尽可能少地写 try / catch 回调。

所以，其实Await 和 Async 和promise各有好处和优点，熟悉掌握2种方法，在不同场景中使用不同的方法才是明智的选择

Await 和 Async 用法和详细解释

猜你喜欢